React项⽬样式管理规范
在最近的⼯作中，⼤⼤⼩⼩已开发过数个基于React的前端项⽬，从⼀开始的单打独⽃到现在的多⼈协作开发，由于缺乏规范，样式管理⼀直是开发中的痛点，样式污染，难以定制化，依赖性⾼，各种问题层出不穷。痛定思痛，我们针对开发中遇到的问题并总结开发中的实际经验和⽹上的主流解决⽅案，最终形成⼀套样式管理规范。
本⽂⾸先对样式进⾏了分类，然后详细讲解了不同类别样式的管理⽅法。本样式管理规范只针对我们的项⽬，但对其他React项⽬也有普遍适⽤性，可以根据⾃⼰的需求进⾏个性化的定制与修改。
样式分类
react开发框架对于React项⽬，可以⼤致将样式分为四类：
1. 公共样式
2. 第三⽅样式
3. 容器样式，即container样式
4. 组件样式，即component样式
前两类样式的管理与传统前端项⽬并⽆差异，React项⽬的重点在于后两类样式的管理。
公共样式
主要包括：
1. reset——样式重置及设置默认值，通常包括normalize.css和base.css，可根据需求定制
2. layout——项⽬主体框架布局的相关样式
3. variable——存放sass变量，主要包括各种主题颜⾊、按钮颜⾊
4. mixin——可复⽤的样式⽚段，包括清除浮动、圆⾓边框、⽂本溢出省略显⽰、⽂本强制换⾏
引⼊⽅式：reset样式在⼊⼝⽂件index.html中通过link标签引⼊，layout也可以在index.html引⼊。如果在layout中使⽤sass，可以与其他⽂件统⼀放在styles⽂件夹中，在index.js中引⼊。对于variable和mixin，同样放在styles⽂件夹中，如果⽂件体积较⼩，可以合并成⼀个⽂件。
variable.scss
// 主⾊
$primary-color : #5a8def;
// 标准⾊
$green : #117511;
$red : #950505;
$blue : #5a8def;
/
/ ⽂字颜⾊、标题颜⾊、背景颜⾊、字体⼤⼩
$body-background : #fff;
$body-background : #fff;
$text-color : #666;
$text-color-secondary : #999; $font-size-sm : 12px;
$font-size-base : 12px;
$font-size-lg : 14px;
// 边框颜⾊以及圆⾓
$border-color-base : #d9d9d9; $border-color-split : #e9e9e9; $border-base : 1px solid #d9d9d9; $border-split : 1px solid #e9e9e9; $border-radius-base : 0px; $border-radius-lg : 4px;
// ⾏⾼
$line-height-sm : 28px;
$line-height-normal : 30px;
$line-height-lg : 36px;
// 间距
$space-sm : 5px;
$space-base : 10px;
$space-lg : 20px;
mixin.scss
// 清除浮动
@mixin clearfix() {
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.container {
@include clearfix;
}
// 圆⾓边框
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
// ⽂本溢出省略显⽰
@mixin text-ellipsis () {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: ellipsis;
}
第三⽅样式
主要是第三⽅类库的依赖样式，⼀般通过link标签引⼊。
引⼊⽅式：在index.html通过link标签引⼊
容器样式
容器即container，⼀般不为container单独编写样式⽂件，将所有容器的样式提取到⼀个⽂件中（暂定为container.scss，放在styles⽂件夹中），这样可以避免样式污染，提⾼代码复⽤性。类名命名采⽤类的⽅式（开发⼈员表⽰不太习惯传统BEM命名，所以进⾏了改进），在项⽬开始前，前端开发⼈员
集中对页⾯进⾏统⼀分析，分解为模块并命名。之后添加新类名要与其他开发⼈员统⼀确认，并保证⽆重名。
引⼊⽅式：放在styles⽂件夹中，在⼊⼝index.js引⼊
类BEM命名
// 主要由三部分组成：块名、元素名、状态
.difier
// 例
.shopCart
.shopCart-title
.shopCart-item
.shopCart-item.selected
.menu
.menu-item
.menu-item.active
组件样式
根据React的组件化开发思想，同时为了避免CSS的全局作⽤域的影响，对于组件即component的样式，我们采⽤css-in-js的⽅案。我们的项⽬中使⽤的是，它是⽬前 React 样式⽅案中最受关注的⼀种，它既具备了 css-in-js 的模块化与参数化优点，⼜完全使⽤CSS的书写习惯，不会引起额外的学习成本。
Styled-components
import React from 'react';
import styled from 'styled-components';
// Title组件将⽣成⼀个字体⼤⼩1.5em，居中对齐，红⾊⽂字的h1标签
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: red;
`;
//Wrapper组件将⽣成⼀个内边距为4em，背景颜⾊为⽩⾊的section标签
const Wrapper = styled.section`
padding: 4em;
background: white;
`;
// 使⽤⽅法和正常的React组件⼀样
<Wrapper>
<Wrapper>
<Title>Hello World, this is my first styled component!</Title> </Wrapper>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。