【CSS-TASK3】那種規范才是最好的規范?

【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 的命名和書寫?

Code Guide by @AlloyTeam

參考三:編碼規范

8.更多討論

討論點一:什么代碼規范是好的規范?

鳴謝

感謝大家觀看

BY : 莊引

------------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個工程師,現在開始,找個師兄,帶你入門,掌控自己學習的節奏,學習的路上不再迷茫”。

這里是技能樹.IT修真院,成千上萬的師兄在這里找到了自己的學習路線,學習透明化,成長可見化,師兄1對1免費指導。快來與我一起學習吧 !http://www.jnshu.com/login/1/86157900

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,869評論 18 139
  • CSS編碼規范 1 前言 CSS作為網頁樣式的描述語言,在百度一直有著廣泛的應用。本文檔的目標是使CSS代碼風格保...
    春木橙云閱讀 292評論 0 0
  • CSS編碼規范 1 前言 CSS 作為網頁樣式的描述語言,在百度一直有著廣泛的應用。本文檔的目標是使 CSS 代碼...
    Top_Chenxi閱讀 168評論 0 0
  • 當要開始找工作的時候,我獨自一人徘徊在異鄉街頭,深秋的風很大,刮亂了我的頭發,迷糊了我的眼睛。茫然的走在冷風中,此...
    被遺忘的小白閱讀 259評論 0 0