React專案樣式管理規範
在最近的工作中，大大小小已開發過數個基於React的前端專案，從一開始的單打獨鬥到現在的多人協作開發，由於缺乏規範，樣式管理一直是開發中的痛點，樣式汙染，難以定製化，依賴性高，各種問題層出不窮。痛定思痛，我們針對開發中遇到的問題並總結開發中的實際經驗和網上的主流解決方案，最終形成一套樣式管理規範。
本文首先對樣式進行了分類，然後詳細講解了不同類別樣式的管理方法。本樣式管理規範只針對我們的專案，但對其他React專案也有普遍適用性，可以根據自己的需求進行個性化的定製與修改。
樣式分類
對於React專案，可以大致將樣式分為四類：
- 公共樣式
- 第三方樣式
- 容器樣式，即
container樣式 - 元件樣式，即
component樣式
前兩類樣式的管理與傳統前端專案並無差異，React專案的重點在於後兩類樣式的管理。
公共樣式
主要包括：
reset——樣式重置及設定預設值，通常包括normalize.css和base.css，可根據需求定製layout——專案主體框架佈局的相關樣式variable——存放sass變數，主要包括各種主題顏色、按鈕顏色mixin——可複用的樣式片段，包括清除浮動、圓角邊框、文字溢位省略顯示、文字強制換行
引入方式：reset樣式在入口檔案index.html中通過link標籤引入，layout也可以在index.html引入。如果在layout中使用sass，可以與其他檔案統一放在styles資料夾中，在index.js
variable.scss
|
// 主色 $primary-color : #5a8def; // 標準色 $green : #117511; $red : #950505; $blue : #5a8def; // 文字顏色、標題顏色、背景顏色、字型大小 $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; } |
第三方樣式
主要是第三方類庫的依賴樣式，一般通過link標籤引入。
引入方式：在index.html通過link標籤引入
容器樣式
容器即container，一般不為container單獨編寫樣式檔案，將所有容器的樣式提取到一個檔案中（暫定為container.scss，放在styles資料夾中），這樣可以避免樣式汙染，提高程式碼複用性。類名命名採用類BEM的方式（開發人員表示不太習慣傳統BEM命名，所以進行了改進），在專案開始前，前端開發人員集中對頁面進行統一分析，分解為模組並命名。之後新增新類名要與其他開發人員統一確認，並保證無重名。
引入方式：放在styles資料夾中，在入口index.js引入
類BEM命名
|
// 主要由三部分組成：塊名、元素名、狀態 .blockName-elName.modifier // 例 .shopCart .shopCart-title .shopCart-item .shopCart-item.selected .menu .menu-item .menu-item.active |
元件樣式
根據React的元件化開發思想，同時為了避免CSS的全域性作用域的影響，對於元件即component的樣式，我們採用css-in-js的方案。我們的專案中使用的是styled-components，它是目前 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> <Title>Hello World, this is my first styled component!</Title> </Wrapper> |