如何寫出更“美”的CSS代碼？
CSS（全稱 C ascading S tyle S heets，層疊樣式表）為開發人員提供聲明式的樣式語言，是前端必備的技能之一。基于互聯網上全面的資料和簡單易懂的語法，CSS非常易于學習，但其知識點廣泛且分散，很難做到精通。在我們日常開發中，受限于原代碼混亂、DDL將近等問題，常常忽視了CSS代碼的質量，很容易寫出雜亂無章的CSS文件。
代碼優化建議
1.使用縮寫屬性精簡代碼
適用于：margin、padding、border、font、background等
但并非所有情況下都必須縮寫，因為當一個屬性的值縮寫時，總是會將所有項都設置一遍，而有時候我們不希望設置值里的某些項，這時候需要開發者自行判斷。
2.合并選擇器
使用",（逗號）"連接多個選擇器定義公用屬性，不僅能減小css文件大小，還能增加可讀性。
為了更易于定位問題，逗號后換行。
3.使用更語義化的單詞命名class
命名的時候以“在你之后開發的人不會產生疑惑”為目標
4.屬性聲明順序
Reference： Bootstrap property order for Stylelint [1]
選擇器中屬性數量較多時，將相關的屬性聲明放在一起，并按以下順序排列：
- Positioning：定位相關，如position、top/bottom/left/right、z-index等
- Box model：盒模型相關，如display、float、margin、width/height等
- Typographic：排版相關，如font、color、line-height等
- Visual：可視相關，如background、color等
- Misc：其他，如opacity、animation等
個人建議：在屬性數量較多時可以參考這5個類別歸類排列，至于順序沒必要太過糾結。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
5.使用&符號引用父選擇器
&是Sass和Less中提供的語法糖，用于表示對父選擇器的引用，antd design的源碼里應用廣泛
優點：非常適合用于編寫組件的樣式，減少了很多重復單詞
缺點：從HTML的class name中尋找對應樣式的成本增加
.header {
.header-title {/* styles */}
.header-title:after {/* styles */}
.header-content {/* styles */}
}
/* 用&引用來優化代碼:point_down: */
.header {
&-title {
/* styles */
&:after {/* styles */}
}
&-content {/* styles */}
}
善用相關技術
從 The State of CSS 2020: 技術 [2] 調研中我們可以得知當前主流CSS工具的用戶數量與滿意率數據（樣本數量1萬+，僅用于參考），其中分為了4個象限：
評估: 使用率較低，滿意度較高。值得關注的技術。
采用: 使用率高，滿意度高。可采用安全技術。【Sass、BEM、PostCSS、Styled Components】
規避: 使用率低，滿意度低。目前最好避免使用的技術。
待定: 使用率高，滿意度低。如果您正在使用這些技術，請重新評估它們。
CSS方法論
BEM：模塊化命名規范
BEM（Block塊、Element元素、Modifier修飾符）是一種規范化的類名命名約定。
There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton
:raising_hand: BEM 解決了什么問題？?
- CSS沒有作用域，class同名時會造成“樣式污染”
- CSS文件較長時，不統一的命名使得結構比較混亂
- 不規范的命名使得樣式難以定位到對應的HTML元素，不同開發者進行開發時容易寫出重復的代碼
BEM的優勢： 模塊化 、 結構化 、 可重用性
:raising_hand: BEM 規范？
Block塊：一個獨立且有意義的實體，任何DOM元素都可以是塊 Element元素 ：塊的子元素，依附于塊存在。如：列表中的某一項、卡片的標題、選擇器中的選擇項等 Modifier修飾符： 表示塊或元素的外觀、狀態或行為。如：是否點擊、是否禁用等 命名規范 ：
.block__element--modifier
block 和 element 用雙下劃線__鏈接
element 和 modifier 用雙中劃線--鏈接
block、element、modifier 包含多個單詞時，用一個中劃線-鏈接
不推薦element嵌套，如果需要嵌套則說明該從中抽一個組件出來了
:chestnut:例子
【Element-UI源碼】https://github.com/ElemeFE/element/blob/dev/packages/table/src/table.vue
Atomic CSS：原子化CSS
:raising_hand:什么是原子化？
原子（atom），是指化學反應不可再分的基本微粒
在ACSS中，將每個僅有單一CSS規則的、不可再拆分的CSS類稱為CSS原子。HTML的樣式由多個CSS原子組合而成，以內聯的形式寫在HTML中。
- 優勢：無需維護CSS文件，在HTML中內聯“所見即所得”；移動/刪除HTML元素時，其樣式也能隨之移動，無需額外的更新成本。
- 缺點：結構和樣式強耦合，不利于大型項目維護，容易產生很多重復代碼。
:chestnut:例子
<!--- 使用ACSS語法創建一個子元素水平垂直居中的容器 --->
<div class="D(f) Jc(c) Ac(c) ">Flex容器</div>
<!--- 原子化CSS思想的代碼 --->
<div className="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-8 ant-col-lg-6 gutter-row"></div>
CSS預/后處理器
為了給CSS提供更強大的功能（嵌套、變量、運算等）、使其更易于維護，誕生了Sass、Less、Stylus等CSS預處理器。開發者可以使用這些工具提供的更便捷的語法和特性進行開發，預處理器則負責將代碼編譯為CSS，從而達到提供樣式的目的。
Sass (Scss) & Less
Sass: 語法 | Sass 中文網 [3] 、 語言特性 | Less 中文網 [4]
:raising_hand:預處理器的優越性？
- 將CSS從聲明語言轉換成一門編程語言
- 可嵌套的語法增加了樣式文件的可讀性和可維護性
- 變量與混合特性能夠減少很多重復的樣式聲明
:raising_hand:Sass .vs. Less？
- Less更像CSS，易于上手，能夠從CSS平滑過渡；Sass的縮進語法接受度因人而異，Sass3.0中提出了兼容CSS的Scss，用戶可以選擇使用Sass或Scss。
- 當項目CSS中需要涉及復雜邏輯時，Sass/Scss更適合，Sass提供了更強大、更接近編程語言的@function、@if/@else、@while等語法；當項目的樣式復雜度不高時，選Sass或Less都可以。（下面是一個Less和Scss語法對比例子:chestnut:）
// Less
.mixin( @count )when( @count > 0 ){
background-color: black;
}
.mixin( @count )when( @count <= 0 ){
background-color: white;
}
.tag {
.mixin(100);
}
// Scss
@function checkCount($count) {
@if $count > 0 {
return black;
}
@else {
return white;
}
}
.tag {
background-color: checkCount(100);
}
- Sass提供了命令行語法，當用戶使用Dart或Ruby時可以通過命令行來對Sass進行解析（將Sass編譯為CSS）等操作，為開發者提供了擴展空間。基于Sass良好的可擴展性，誕生了諸如Compass等Sass框架。
PostCSS
:raising_hand:定義？
狹義的PostCSS：“A tool for transforming CSS with JavaScript”，將CSS轉換為JS代碼的工具，提供了將CSS代碼解析為AST的能力，并向開發者暴露出能夠修改CSS代碼的JavaScript API。
廣義的PostCSS：基于PostCSS工具提供的API開發出的一系列插件，能夠對用戶編寫的CSS代碼進行處理，這些插件也可以稱之為后處理器。
:raising_hand:有什么較為流行的PostCSS應用場景？
- autoprefixer插件：打包時自動添加瀏覽器前綴屬性
div { display: flex }
// 自動轉換為:point_down:
div{
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex;
}
- 通過顏色值的識別與替換來切換深/淺色模式 前端站點一鍵支持暗色模式 [5]
- stylelint插件：CSS代碼檢查工具
- postcss-utilities [6] ：為開發者提供CSS簡寫方式（原子化）
.cfx {
@util clearfix;
}
// 等價于:point_down:
.cfx:after {
content: '';
display: block;
clear: both;
}
.rounded-top {
@util border-top-radius(4px);
}
// 等價于:point_down:
.rounded-top {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
CSS in JS
styled-components/Emotion
- 高可復用性：從組件的層面對 CSS 進行封裝，適應“組件化”的前端時代，代碼中不再需要維護CSS文件。
- 高靈活性：使用 styled-components 能夠很輕松地找到某個組件關聯的樣式；移動/刪除HTML元素時，其樣式也能隨之移動/刪除。
- 解決了CSS“全局污染”的痛點：styled-components在編譯時為樣式生成唯一的class name，開發者不必再擔心 class name 重復。
// 創建一個 Title 組件,它將渲染一個附加了樣式的 <h1> 標簽
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// 創建一個 Wrapper 組件,它將渲染一個附加了樣式的 <section> 標簽，并讀取wrapperColor屬性作為背景色
const Wrapper = styled.section`
padding: 4em;
background: ${props => props.wrapperColor || "palevioletred"};
`;
// 就像使用常規 React 組件一樣使用 Title 和 Wrapper
render(
<Wrapper wrapperColor="red">
<Title>
Hello World!
</Title>
</Wrapper>
);
:raising_hand: styled-components的適用場景
- 使用React或React Native進行開發時
- 中小型項目；或基于組件庫開發、自定義樣式復雜度不高的大型項目
- 頁面中元素樣式無需變化或變化較少時
總結
綜上，CSS作為一門前端必備的基礎技能，具有許多原生的痛點。近年來，全球的開發者也在源源不斷地提出不同的優化方案，我們在日常關注React、NodeJS、性能優化等熱門前端話題的時候，也不要忘了好好寫CSS代碼呀～
