【CSS-TASK3】那種規范才是最好的規范？
小課堂【武漢第177期】
分享人：莊引
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴展思考
7.參考文獻
8.更多討論
1.背景介紹
前端開發web應用的規范的作用兩方面： 1) 代碼一致性 2) 最佳實踐。 通過保持代碼風格一致，容易被理解和被維護。我們可以減少遺留系統維護的負擔，并降低未來系統崩潰的風險。而通過遵照最佳實踐，我們能確保優化的頁面加載、性能以及可維護的代碼。
2.知識剖析
代碼風格
2.1 文件
[建議] CSS 文件使用無 BOM 的 UTF-8 編碼。 解釋： UTF-8 編碼具有更廣泛的適應性。BOM 在使用程序或工具處理文件時可能造成不必要的干擾。
2.2 縮進
[強制] 使用 4 個空格做為一個縮進層級，不允許使用 2 個空格 或 tab 字符。 示例：
.selector{margin:0;padding:0;}
2.3 空格
[強制] 選擇器 與 { 之間必須包含空格。 示例：
.selector{ }
[強制] 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。 示例：
margin:0;
[強制] 列表型屬性值 書寫在單行時，, 后必須跟一個空格。 示例：
font-family: Arial, sans-serif;
2.4 行長度
[強制] 每行不得超過 120 個字符，除非單行不可分割。 解釋： 常見不可分割的場景為URL超長。 [建議] 對于超長的樣式，在樣式值的 空格 處或 , 后換行，建議按邏輯分組。 示例：
/* 不同屬性值按邏輯分組 */background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat00;/* 可重復多次的屬性，每次重復一行 */background-image:url(aVeryVeryVeryLongUrlIsPlacedHere)url(anotherVeryVeryVeryLongUrlIsPlacedHere);/* 類似函數的屬性值可以根據函數調用的縮進進行 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88,94,124)),color-stop(0.52, rgb(115,123,162)) );
2.5 選擇器
[強制] 當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。 示例：
/* good */.post,.page,.comment{line-height:1.5;}/* bad */.post,.page,.comment{line-height:1.5;}
2.6 屬性
[強制] 屬性定義必須另起一行。 示例：
/* good */.selector{margin:0;padding:0;}/* bad */.selector{margin:0;padding:0;}
[強制] 屬性定義后必須以分號結尾。 示例：
/* good */.selector{margin:0;}/* bad */.selector{margin:0}
通用
3.1 選擇器
[強制] 如無必要，不得為 id、class 選擇器添加類型選擇器進行限定。 解釋： 在性能和維護性上，都有一定的影響。 示例：
/* good */#error,.danger-message{font-color:#c00;}/* bad */dialog#error,p.danger-message{font-color:#c00;}
3.2 屬性縮寫
[建議] 在可以使用縮寫的情況下，盡量使用屬性縮寫。 示例：
/* good */.post{font:12px/1.5arial, sans-serif;}/* bad */.post{font-family: arial, sans-serif;font-size:12px;line-height:1.5;}
3.3 屬性書寫順序
[建議] 同一 rule set 下的屬性在書寫時，應按功能進行分組，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性。
解釋：
Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相關屬性包括：border / margin / padding / width / height 等
Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
Visual 相關屬性包括：background / color / transition / list-style 等 另外，如果包含 content 屬性，應放在最前面。
示例：
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴展思考
7.參考文獻
8.更多討論
1.背景介紹
前端開發web應用的規范的作用兩方面： 1) 代碼一致性 2) 最佳實踐。 通過保持代碼風格一致，容易被理解和被維護。我們可以減少遺留系統維護的負擔，并降低未來系統崩潰的風險。而通過遵照最佳實踐，我們能確保優化的頁面加載、性能以及可維護的代碼。
3.2 屬性縮寫
[建議] 在可以使用縮寫的情況下，盡量使用屬性縮寫。 示例：
/* good */.post{font:12px/1.5arial, sans-serif; ? ?}/* bad */.post{font-family: arial, sans-serif;font-size:12px;line-height:1.5; ? ?}
3.3 屬性書寫順序
[建議] 同一 rule set 下的屬性在書寫時，應按功能進行分組，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性。 解釋： Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等 Box Model 相關屬性包括：border / margin / padding / width / height 等 Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等 Visual 相關屬性包括：background / color / transition / list-style 等 另外，如果包含 content 屬性，應放在最前面。 示例：
.sidebar{/* formatting model: positioning schemes / offsets / z-indexes / display / ... ?*/position: absolute;top:50px;left:0;overflow-x: hidden;/* box model: sizes / margins / paddings / borders / ... ?*/width:200px;padding:5px;border:1pxsolid#ddd;/* typographic: font / aligns / text styles / ... */font-size:14px;line-height:20px;/* visual: colors / shadows / gradients / ... */background:#f5f5f5;color:#333;-webkit-transition: color1s;-moz-transition: color1s;transition: color1s;}
3.4 清除浮動
[建議] 當元素需要撐起高度以包含內部的浮動元素時，通過對偽類設置 clear 或觸發 BFC 的方式進行 clearfix。盡量不使用增加空標簽的方式。 解釋： 觸發 BFC 的方式很多，常見的有：
float 非 none
position 非 static
overflow 非 visible
注意，對已經觸發 BFC 的元素不需要再進行 clearfix。
3.5 !IMPORTANT
[建議] 盡量不使用 !important聲明。 [建議] 當需要強制指定樣式且不允許任何場景覆蓋時，通過標簽內聯和 !important定義樣式。 解釋： 必須注意的是，僅在設計上 確實不允許任何其它場景覆蓋樣式 時，才使用內聯的 !important樣式。通常在第三方環境的應用中使用這種方案。下面的 z-index 章節是其中一個特殊場景的典型樣例。
3.常見問題
問題1:class命名有什么常用方式？
3.5 !IMPORTANT
[建議] 盡量不使用 !important 聲明。 [建議] 當需要強制指定樣式且不允許任何場景覆蓋時，通過標簽內聯和 !important 定義樣式。 解釋： 必須注意的是，僅在設計上 確實不允許任何其它場景覆蓋樣式 時，才使用內聯的 !important 樣式。通常在第三方環境的應用中使用這種方案。下面的 z-index 章節是其中一個特殊場景的典型樣例。
3.常見問題
問題1:class命名有什么常用方式？
4.解決方案
在實際編程中，命名問題一直是很麻煩的問題，要想代碼可讀性高，維護方便，就必須規范命名。這里介紹幾種命名方法
3.5 !IMPORTANT
[建議] 盡量不使用 !important 聲明。 [建議] 當需要強制指定樣式且不允許任何場景覆蓋時，通過標簽內聯和 !important 定義樣式。 解釋： 必須注意的是，僅在設計上 確實不允許任何其它場景覆蓋樣式 時，才使用內聯的 !important 樣式。通常在第三方環境的應用中使用這種方案。下面的 z-index 章節是其中一個特殊場景的典型樣例。
3.常見問題
問題1:class命名有什么常用方式？
4.解決方案
在實際編程中，命名問題一直是很麻煩的問題，要想代碼可讀性高，維護方便，就必須規范命名。這里介紹幾種命名方法
原子類命名規則
將復用性高的單條屬性直接命名成類
.ml5{margin-left:5px;}
模塊命名規則
按照職能劃分命名規則
例如，模塊是nav，便可以命名nav-tittle、nav-left
BEM
BEM思想是由于項目開發中，每個組件都是唯一無二的，其名字也是獨一無二的，組件內部元素的名字都加上組件名，并用元素的名字作為選擇器，自然組件內的樣式就不會與組件外的樣式沖突了。這是通過組件名的唯一性來保證選擇器的唯一性，從而保證樣式不會污染到組件外。
BEM的命名規矩很容易記：block-name__element-name–modifier-name，也就是模塊名 + 元素名 + 修飾器名
上一頁下一
問題一:原子類的優劣？
原子類在網上爭議非常大，原子類簡單方便，但是不宜維護，控制困難。原子類其實不是一種工具，而是一種編寫 CSS 的思想，即：抽出高度復用的樣式模塊，獨立成一個原子類，為對應的模塊添加。但是不宜過度使用，負責就和直接添加style沒有區別了，在涉及數值方面我的建議時不要使用原子類，否則修改起來超級麻煩，可以使用less、sass等代替
7.參考文獻
5.編碼實戰
6.擴展思考
問題一:原子類的優劣？
原子類在網上爭議非常大，原子類簡單方便，但是不宜維護，控制困難。原子類其實不是一種工具，而是一種編寫 CSS 的思想，即：抽出高度復用的樣式模塊，獨立成一個原子類，為對應的模塊添加。但是不宜過度使用，負責就和直接添加style沒有區別了，在涉及數值方面我的建議時不要使用原子類，否則修改起來超級麻煩，可以使用less、sass等代替
7.參考
5.編碼實戰
6.擴展思考
問題一:原子類的優劣？
原子類在網上爭議非常大，原子類簡單方便，但是不宜維護，控制困難。原子類其實不是一種工具，而是一種編寫 CSS 的思想，即：抽出高度復用的樣式模塊，獨立成一個原子類，為對應的模塊添加。但是不宜過度使用，負責就和直接添加style沒有區別了，在涉及數值方面我的建議時不要使用原子類，否則修改起來超級麻煩，可以使用less、sass等代替
7.參：
參考一：如何規范 CSS 的命名和書寫？
參考三：編碼規范
8.更多討論
討論點一:什么代碼規范是好的規范？
鳴謝
感謝大家觀看
BY : 莊引
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！http://www.jnshu.com/login/1/86157900
