在最近的工作中，大大小小已開發(fā)過數(shù)個(gè)基于react的前端項(xiàng)目须喂，從一開始的單打獨(dú)斗到現(xiàn)在的多人協(xié)作開發(fā)，由于缺乏規(guī)范趁蕊，樣式管理一直是開發(fā)中的痛點(diǎn)坞生，樣式污染，難以定制化掷伙，依賴性高是己，各種問題層出不窮。痛定思痛任柜，我們針對(duì)開發(fā)中遇到的問題并總結(jié)開發(fā)中的實(shí)際經(jīng)驗(yàn)和網(wǎng)上的主流解決方案卒废，最終形成一套樣式管理規(guī)范。
本文首先對(duì)樣式進(jìn)行了分類宙地，然后詳細(xì)講解了不同類別樣式的管理方法摔认。本樣式管理規(guī)范只針對(duì)我們的項(xiàng)目，但對(duì)其他React項(xiàng)目也有普遍適用性宅粥，可以根據(jù)自己的需求進(jìn)行個(gè)性化的定制與修改参袱。
樣式分類
對(duì)于react項(xiàng)目，可以大致將樣式分為四類：
- 公共樣式
- 第三方樣式
- 容器樣式，即container樣式
- 組件樣式蓖柔，即component樣式
前兩類樣式的管理與傳統(tǒng)前端項(xiàng)目并無差異辰企，react項(xiàng)目的重點(diǎn)在于后兩類樣式的管理风纠。
公共樣式
主要包括：
- reset——樣式重置及設(shè)置默認(rèn)值况鸣，通常包括normalize.css和base.css，可根據(jù)需求定制
- layout——項(xiàng)目主體框架布局的相關(guān)樣式
- variable——存放sass變量竹观，主要包括各種主題顏色镐捧、按鈕顏色
- mixin——可復(fù)用的樣式片段，包括清除浮動(dòng)臭增、圓角邊框懂酱、文本溢出省略顯示、文本強(qiáng)制換行
引入方式：reset樣式在入口文件index.html中通過link標(biāo)簽引入誊抛，layout也可以在index.html引入列牺。如果在layout中使用sass，可以與其他文件統(tǒng)一放在styles文件夾中拗窃，在index.js中引入瞎领。對(duì)于variable和mixin，同樣放在styles文件夾中随夸，如果文件體積較小九默，可以合并成一個(gè)文件。
variable.scss
// 主色
$primary-color : #5a8def;
// 標(biāo)準(zhǔn)色
$green : #117511;
$red : #950505;
$blue : #5a8def;
// 文字顏色宾毒、標(biāo)題顏色驼修、背景顏色、字體大小
$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
// 清除浮動(dòng)
@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;
}
第三方樣式
主要是第三方類庫(kù)的依賴樣式诈铛，一般通過link標(biāo)簽引入乙各。
引入方式：在index.html通過link標(biāo)簽引入
容器樣式
容器即container，一般不為container單獨(dú)編寫樣式文件幢竹，將所有容器的樣式提取到一個(gè)文件中（暫定為container.scss耳峦，放在styles文件夾中），這樣可以避免樣式污染妨退，提高代碼復(fù)用性妇萄。類名命名采用類BEM的方式（開發(fā)人員表示不太習(xí)慣傳統(tǒng)BEM命名，所以進(jìn)行了改進(jìn)）咬荷，在項(xiàng)目開始前冠句，前端開發(fā)人員集中對(duì)頁(yè)面進(jìn)行統(tǒng)一分析，分解為模塊并命名幸乒。之后添加新類名要與其他開發(fā)人員統(tǒng)一確認(rèn)懦底，并保證無重名。
引入方式：放在styles文件夾中罕扎，在入口index.js引入
類BEM命名
// 主要由三部分組成：塊名聚唐、元素名丐重、狀態(tài)
.blockName-elName.modifier
// 例
.shopCart
.shopCart-title
.shopCart-item
.shopCart-item.selected
.menu
.menu-item
.menu-item.active
組件樣式
根據(jù)React的組件化開發(fā)思想，同時(shí)為了避免CSS的全局作用域的影響杆查，對(duì)于組件即component的樣式扮惦，我們采用css-in-js的方案。我們的項(xiàng)目中使用的是styled-components亲桦，它是目前 React 樣式方案中最受關(guān)注的一種崖蜜，它既具備了 css-in-js 的模塊化與參數(shù)化優(yōu)點(diǎn)，又完全使用CSS的書寫習(xí)慣客峭，不會(huì)引起額外的學(xué)習(xí)成本豫领。
Styled-components
import React from 'react';
import styled from 'styled-components';
// Title組件將生成一個(gè)字體大小1.5em，居中對(duì)齊舔琅，紅色文字的h1標(biāo)簽
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: red;
`;
//Wrapper組件將生成一個(gè)內(nèi)邊距為4em等恐，背景顏色為白色的section標(biāo)簽
const Wrapper = styled.section`
padding: 4em;
background: white;
`;
// 使用方法和正常的React組件一樣
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
