CSS的命名和書寫規范

這篇文章主要講解了“CSS的命名和書寫規范”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS的命名和書寫規范”吧！

　　選擇器的命名規范

　　1.模塊化命名

　　例如：

　　與布局相關的樣式以“g”為開頭。如“g-content”和“g-header”;

　　與掛鉤相關的樣式以“j”為開頭。如“j-open”和“j-request”;

　　與元件相關的樣式以“m”為開頭。如“m-dropMenu”和“m-slider”;

　　與狀態相關的樣式以“s”為開頭。如“s-current”和“s-selected”;

　　與工具相關的樣式以“u”為開頭。如“u-clearfix”和“u-ellipsis”。

　　“工具”是指與業務邏輯解耦的，能夠重用的樣式;“元件”是指自定義的可重用且可移植的基本網頁元素;“掛鉤”是指供JavaScript操縱的樣式。

　　以上的說明只是舉例，大家可以根據項目需求自定義開頭的字符，這樣做的目的是使CSS代碼整潔易維護.

　　2.選擇器皆為小寫形式

　　推薦的寫法：

　　.g-first-header

　　{

　　line-height: 16px;

　　}

　　前端新手學習交流群，如果有想學習前端或者交流經驗的都可以加入，一起互相學習交流：→→→點擊我即可加入圈子

　　不推薦的寫法：

　　.g-FirstHeader

　　{

　　line-height: 16px;

　　}

　　3.每個選擇器獨占一列

　　除最后一個選擇器外，其它每一列選擇器均以逗號結尾。若用到兄弟元素選擇器，則相關符號的左右兩端均留出一個半角空格。

　　推薦的寫法：

　　.g-first-header,

　　.g-second-header-1 > .g-second-header-2

　　{

　　border: 2px solid #C3C3C3;

　　}

　　不推薦的寫法：

　　.g-first-header, .g-second-header-1>.g-second-header-2

　　{

　　border: 2px solid #C3C3C3;

　　}

　　4.避開HTML標記

　　構建選擇器時應盡量采用語義明確的類別名稱，避開HTML標記，因為一旦HTML的結構產生更動，則與此對應的樣式也就無效了。盡量將樣式與結構分離，這樣會使得階層式樣式表在日后更易被維護。

　　推薦的寫法：

　　.g-content .g-item

　　{

　　flex-basis: 20%;

　　}

　　不推薦的寫法：

　　.g-content li

　　{

　　flex-basis: 20%;

　　}

　　5.少用ID

　　ID的唯一性注定了它所對應的元素的樣式就是一次性的，無法重用，一旦HTML結構發生變化，套用ID的選擇器就要隨之修改。另一個重要的原因是：ID的權重值是最高的，這可能會導致日后添加的樣式無法復寫原先的樣式。

　　推薦的寫法：

　　.g-special-content

　　{

　　height: 100px;

　　width: 300px;

　　}

　　不推薦的寫法：

　　#special-content

　　{

　　height: 100px;

　　width: 300px;

　　}

　　屬性的書寫規范

　　1.按順序排列屬性

　　每條規則下的屬性在書寫時，應按類別進行分組，其排列順序如下：

　　位置：bottom、float、display、left、position、right、top和z-index等;

　　大小：height、margin、padding和width等;

　　版式：color、font、letter-spacing、line-height和text-align等;

　　背景：background等;

　　其它：animation和transition等。

　　2.縮寫屬性

　　有些屬性是可以合在一塊的，既精簡代碼，又便于閱讀。

　　推薦的寫法：

　　.test-selector-1

　　{

　　padding: 3px 5px;

　　}

　　不推薦的寫法：

　　.test-selector-1

　　{

　　padding-top: 3px;

　　padding-right: 5px;

　　padding-bottom: 3px;

　　padding-left: 5px;

　　}

　　3.去除小數開頭的0

　　推薦的寫法：

　　.test-selector-2

　　{

　　font-size: .5em;

　　}

　　不推薦的寫法：

　　.test-selector-2

　　{

　　font-size: 0.5em;

　　}

　　4.縮寫十六進位值

　　推薦的寫法：

　　.test-selector-3

　　{

　　background-color: #0b0;

　　}

　　不推薦的寫法：

　　.test-selector-3

　　{

　　background-color: #00bb00;

　　}

　　5.合理使用引號

　　對于“font-family”屬性來說，我們通常會以引號夾住帶有空格的字體名稱，而對于不具備這些特征的一般字體來說，引號存在與否并不影響頁面的顯示效果。為了保證視覺上的統一，最大程度相容各種瀏覽器，建議你在所有字體名稱的兩端均加上引號。

　　推薦的寫法：

　　.test-selector-4

　　{

　　font-family: "Microsoft YaHei", "微軟正黑體", "\5b8b\4f53";

　　}

　　不推薦的寫法：

　　.test-selector-4

　　{

　　font-family: "Microsoft YaHei", 微軟正黑體, \5b8b\4f53;

　　}

　　個別屬性的值含有“url()”字串，開發者需要往其中傳入一個資源路徑。請注意，在低版本的Internet Explorer中，路徑中的空格有可能無法被辨識，導致資源無法被找到。為保險起見，不論路徑中是否含有空格，你傳入的路徑兩端最好都加上引號。

　　推薦的寫法：

　　.test-selector-5

　　{

　　background-image: url(“../Images/BacPic.png”);

　　}

　　不推薦的寫法：

　　.test-selector-5

　　{

　　background-image: url(../Images/BackPic.png);

　　}

　　6.避開!important

　　“!important”會給日后的維護帶來麻煩，使開發者難以查找樣式問題。如果在書寫時發現新樣式無法復寫舊樣式。通常有兩個原因：要么新樣式寫在了舊樣式的前面，要么新樣式對應的選擇器的權重比舊樣式的更低。針對后一種情況，只要增加新樣式選擇器的權重值就可以完全避開這個問題，無需用到“!important”。

　　推薦的寫法：

　　.test-selector-6 .test-selector-7

　　{

　　font-size: 16px;

　　}

　　.test-selector-6 .test-selector-7 .test-selector-8

　　{

　　font-size: 14px;

　　}

　　不推薦的寫法：

　　.test-selector-6 .test-selector-7

　　{

　　font-size: 16px;

　　}

　　.test-selector-8

　　{

　　font-size: 14px !important;

　　}

　　7.規范注釋

　　在單列注釋中，星號與內容之間留一個半角空格。

　　推薦的寫法：

　　/* 這是第一段注釋文字。 */

　　// 這是第二段注釋文字。復制代碼

　　不推薦的寫法：

　　/*這里是一段注釋文字。*/

　　//這是第二段注釋文字。復制代碼

　　在多列注釋中，多個星號要排成一條線。星號與內容之間同樣留一個半角空格。

　　推薦的寫法：

　　/**

　　* 這里是一段注釋文字。

　　* 這是第二段注釋文字。

　　*/

　　不推薦的寫法：

　　/**

　　*這里是一段注釋文字。

　　*這是第二段注釋文字。

　　*/

　　在文檔注釋中，除了要按照多列注釋的寫法以外，還要用標識符來說明文檔中的某一部分，標識符后的冒號右側與說明文字之間留一個半角空格。

　　推薦的寫法：

　　/**

　　* @name: 文件名;

　　* @description: 描述文字;

　　* @author: 張三、李四;

　　* @update: 2018年12月19日。

　　*/

　　不推薦的寫法：

　　/**

　　* @name:文件名;

　　* @description:描述文字;

　　* @author:張三、李四;

　　* @update:2018年12月19日。

　　*/

　　8.將標準屬性置于底部

　　有些屬性在部分瀏覽器中尚未完全標準化，每家瀏覽器開發商對這些屬性的實現效果或許并不統一，因此目前需要在開頭加入瀏覽器廠商的專有字符串。因此同一個屬性需要寫多次，但有一條需要注意：將不帶前置標記的屬性置于最下方。

　　推薦的寫法：

　　.test-selector-9

　　{

　　opacity: 0;

　　-webkit-transition: opacity 3s;

　　-moz-transition: opacity 3s;

　　-ms-transition: opacity 3s;

　　-o-transition: opacity 3s;

　　transition: opacity 3s;

　　}

　　不推薦的寫法：

　　.test-selector-9

　　{

　　opacity: 0;

　　-webkit-transition: opacity 3s;

　　transition: opacity 3s;

　　-moz-transition: opacity 3s;

　　-ms-transition: opacity 3s;

　　-o-transition: opacity 3s;

　　}

　　9.注意標點符號

　　每個屬性獨占一列。緊接樣式屬性的冒號，其后面要留一個半角空格。值以分號結尾。

　　推薦的寫法：

　　.test-selector-10

　　{

　　opacity: .5;

　　}

　　不推薦的寫法：

　　.test-selector-10

　　{

　　opacity:.5

　　}

　　10.樣式塊間留一空行

　　樣式選擇器及其樣式塊與周遭內容要保留一空行以避免內容過于擁擠，妨礙尋找。

　　推薦的寫法：

　　.test-selector-11

　　{

　　opacity: 0.5;

　　}

　　.test-selector-12

　　{

　　font-size: 16px;

　　}

　　.test-selector-13

　　{

　　overflow: hidden;

　　}

　　不推薦的寫法：

　　.test-selector-11

　　{

　　opacity: 0.5;

　　}

　　.test-selector-12

　　{

　　font-size: 16px;

　　}

　　.test-selector-13

　　{

　　overflow: hidden;

　　}

　　11.將過長的內容折為若干列

　　同一屬性的值不止一個或值過長時，以逗號分割這些值，每個逗號后添加一個空格，過長的值可以另起一列。

　　推薦的寫法：

　　.test-selector-14

　　{

　　linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0,

　　linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0,

　　linear-gradient(315deg, deeppink 25%, transparent 25%),

　　linear-gradient(45deg, deeppink 25%, transparent 25%);

　　}

　　不推薦的寫法：

　　.test-selector-14

　　{

　　linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%);
　　選擇器的命名規范

　　1.模塊化命名

　　例如：

　　與布局相關的樣式以“g”為開頭。如“g-content”和“g-header”;

　　與掛鉤相關的樣式以“j”為開頭。如“j-open”和“j-request”;

　　與元件相關的樣式以“m”為開頭。如“m-dropMenu”和“m-slider”;

　　與狀態相關的樣式以“s”為開頭。如“s-current”和“s-selected”;

　　與工具相關的樣式以“u”為開頭。如“u-clearfix”和“u-ellipsis”。

　　“工具”是指與業務邏輯解耦的，能夠重用的樣式;“元件”是指自定義的可重用且可移植的基本網頁元素;“掛鉤”是指供JavaScript操縱的樣式。

　　以上的說明只是舉例，大家可以根據項目需求自定義開頭的字符，這樣做的目的是使CSS代碼整潔易維護.

　　2.選擇器皆為小寫形式

　　推薦的寫法：

　　.g-first-header

　　{

　　line-height: 16px;

　　}

　　前端新手學習交流群，如果有想學習前端或者交流經驗的都可以加入，一起互相學習交流：→→→點擊我即可加入圈子

　　不推薦的寫法：

　　.g-FirstHeader

　　{

　　line-height: 16px;

　　}

　　3.每個選擇器獨占一列

　　除最后一個選擇器外，其它每一列選擇器均以逗號結尾。若用到兄弟元素選擇器，則相關符號的左右兩端均留出一個半角空格。

　　推薦的寫法：

　　.g-first-header,

　　.g-second-header-1 > .g-second-header-2

　　{

　　border: 2px solid #C3C3C3;

　　}

　　不推薦的寫法：

　　.g-first-header, .g-second-header-1>.g-second-header-2

　　{

　　border: 2px solid #C3C3C3;

　　}

　　4.避開HTML標記

　　構建選擇器時應盡量采用語義明確的類別名稱，避開HTML標記，因為一旦HTML的結構產生更動，則與此對應的樣式也就無效了。盡量將樣式與結構分離，這樣會使得階層式樣式表在日后更易被維護。

　　推薦的寫法：

　　.g-content .g-item

　　{

　　flex-basis: 20%;

　　}

　　不推薦的寫法：

　　.g-content li

　　{

　　flex-basis: 20%;

　　}

　　5.少用ID

　　ID的唯一性注定了它所對應的元素的樣式就是一次性的，無法重用，一旦HTML結構發生變化，套用ID的選擇器就要隨之修改。另一個重要的原因是：ID的權重值是最高的，這可能會導致日后添加的樣式無法復寫原先的樣式。

　　推薦的寫法：

　　.g-special-content

　　{

　　height: 100px;

　　width: 300px;

　　}

　　不推薦的寫法：

　　#special-content

　　{

　　height: 100px;

　　width: 300px;

　　}

　　屬性的書寫規范

　　1.按順序排列屬性

　　每條規則下的屬性在書寫時，應按類別進行分組，其排列順序如下：

　　位置：bottom、float、display、left、position、right、top和z-index等;

　　大小：height、margin、padding和width等;

　　版式：color、font、letter-spacing、line-height和text-align等;

　　背景：background等;

　　其它：animation和transition等。

　　2.縮寫屬性

　　有些屬性是可以合在一塊的，既精簡代碼，又便于閱讀。

　　推薦的寫法：

　　.test-selector-1

　　{

　　padding: 3px 5px;

　　}

　　不推薦的寫法：

　　.test-selector-1

　　{

　　padding-top: 3px;

　　padding-right: 5px;

　　padding-bottom: 3px;

　　padding-left: 5px;

　　}

　　3.去除小數開頭的0

　　推薦的寫法：

　　.test-selector-2

　　{

　　font-size: .5em;

　　}

　　不推薦的寫法：

　　.test-selector-2

　　{

　　font-size: 0.5em;

　　}

　　4.縮寫十六進位值

　　推薦的寫法：

　　.test-selector-3

　　{

　　background-color: #0b0;

　　}

　　不推薦的寫法：

　　.test-selector-3

　　{

　　background-color: #00bb00;

　　}

　　5.合理使用引號

　　對于“font-family”屬性來說，我們通常會以引號夾住帶有空格的字體名稱，而對于不具備這些特征的一般字體來說，引號存在與否并不影響頁面的顯示效果。為了保證視覺上的統一，最大程度相容各種瀏覽器，建議你在所有字體名稱的兩端均加上引號。

　　推薦的寫法：

　　.test-selector-4

　　{

　　font-family: "Microsoft YaHei", "微軟正黑體", "\5b8b\4f53";

　　}

　　不推薦的寫法：

　　.test-selector-4

　　{

　　font-family: "Microsoft YaHei", 微軟正黑體, \5b8b\4f53;

　　}

　　個別屬性的值含有“url()”字串，開發者需要往其中傳入一個資源路徑。請注意，在低版本的Internet Explorer中，路徑中的空格有可能無法被辨識，導致資源無法被找到。為保險起見，不論路徑中是否含有空格，你傳入的路徑兩端最好都加上引號。

　　推薦的寫法：

　　.test-selector-5

　　{

　　background-image: url(“../Images/BacPic.png”);

　　}

　　不推薦的寫法：

　　.test-selector-5

　　{

　　background-image: url(../Images/BackPic.png);

　　}

　　6.避開!important

　　“!important”會給日后的維護帶來麻煩，使開發者難以查找樣式問題。如果在書寫時發現新樣式無法復寫舊樣式。通常有兩個原因：要么新樣式寫在了舊樣式的前面，要么新樣式對應的選擇器的權重比舊樣式的更低。針對后一種情況，只要增加新樣式選擇器的權重值就可以完全避開這個問題，無需用到“!important”。

　　推薦的寫法：

　　.test-selector-6 .test-selector-7

　　{

　　font-size: 16px;

　　}

　　.test-selector-6 .test-selector-7 .test-selector-8

　　{

　　font-size: 14px;

　　}

　　不推薦的寫法：

　　.test-selector-6 .test-selector-7

　　{

　　font-size: 16px;

　　}

　　.test-selector-8

　　{

　　font-size: 14px !important;

　　}

　　7.規范注釋

　　在單列注釋中，星號與內容之間留一個半角空格。

　　推薦的寫法：

　　/* 這是第一段注釋文字。 */

　　// 這是第二段注釋文字。復制代碼

　　不推薦的寫法：

　　/*這里是一段注釋文字。*/

　　//這是第二段注釋文字。復制代碼

　　在多列注釋中，多個星號要排成一條線。星號與內容之間同樣留一個半角空格。

　　推薦的寫法：

　　/**

　　* 這里是一段注釋文字。

　　* 這是第二段注釋文字。

　　*/

　　不推薦的寫法：

　　/**

　　*這里是一段注釋文字。

　　*這是第二段注釋文字。

　　*/

　　在文檔注釋中，除了要按照多列注釋的寫法以外，還要用標識符來說明文檔中的某一部分，標識符后的冒號右側與說明文字之間留一個半角空格。

　　推薦的寫法：

　　/**

　　* @name: 文件名;

　　* @description: 描述文字;

　　* @author: 張三、李四;

　　* @update: 2018年12月19日。

　　*/

　　不推薦的寫法：

　　/**

　　* @name:文件名;

　　* @description:描述文字;

　　* @author:張三、李四;

　　* @update:2018年12月19日。

　　*/

　　8.將標準屬性置于底部

　　有些屬性在部分瀏覽器中尚未完全標準化，每家瀏覽器開發商對這些屬性的實現效果或許并不統一，因此目前需要在開頭加入瀏覽器廠商的專有字符串。因此同一個屬性需要寫多次，但有一條需要注意：將不帶前置標記的屬性置于最下方。

　　推薦的寫法：

　　.test-selector-9

　　{

　　opacity: 0;

　　-webkit-transition: opacity 3s;

　　-moz-transition: opacity 3s;

　　-ms-transition: opacity 3s;

　　-o-transition: opacity 3s;

　　transition: opacity 3s;

　　}

　　不推薦的寫法：

　　.test-selector-9

　　{

　　opacity: 0;

　　-webkit-transition: opacity 3s;

　　transition: opacity 3s;

　　-moz-transition: opacity 3s;

　　-ms-transition: opacity 3s;

　　-o-transition: opacity 3s;

　　}

　　9.注意標點符號

　　每個屬性獨占一列。緊接樣式屬性的冒號，其后面要留一個半角空格。值以分號結尾。

　　推薦的寫法：

　　.test-selector-10

　　{

　　opacity: .5;

　　}

　　不推薦的寫法：

　　.test-selector-10

　　{

　　opacity:.5

　　}

　　10.樣式塊間留一空行

　　樣式選擇器及其樣式塊與周遭內容要保留一空行以避免內容過于擁擠，妨礙尋找。

　　推薦的寫法：

　　.test-selector-11

　　{

　　opacity: 0.5;

　　}

　　.test-selector-12

　　{

　　font-size: 16px;

　　}

　　.test-selector-13

　　{

　　overflow: hidden;

　　}

　　不推薦的寫法：

　　.test-selector-11

　　{

　　opacity: 0.5;

　　}

　　.test-selector-12

　　{

　　font-size: 16px;

　　}

　　.test-selector-13

　　{

　　overflow: hidden;

　　}

　　11.將過長的內容折為若干列

　　同一屬性的值不止一個或值過長時，以逗號分割這些值，每個逗號后添加一個空格，過長的值可以另起一列。

　　推薦的寫法：

　　.test-selector-14

　　{

　　linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0,

　　linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0,

　　linear-gradient(315deg, deeppink 25%, transparent 25%),

　　linear-gradient(45deg, deeppink 25%, transparent 25%);

　　}

　　不推薦的寫法：

　　.test-selector-14

　　{

　　linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%);

　　}

　　12.避開CSS Hack

　　所謂“CSS Hack”，就是在樣式表中加入少許特殊符號，讓能夠辨識不同符號的瀏覽器在同一個元素上計算出來的樣式各不相同。出現CSS Hack的原因就在于老式的瀏覽器(諸如飽受詬病的Internet Explorer 6)對同一套樣式表的計算結果與其它瀏覽器的并不相同，這就很有可能會造成版式上的錯亂。因此在過去，我們通常要針對個別怪異的瀏覽器撰寫有針對性的CSS。如width: 300px; _width: 200px;對其它瀏覽器來說，該選擇器的寬度值應為300個像素，但IE 6能夠辨識出底線，因此它計算出的寬度就是200個像素。

　　13.減少使用影響性能的屬性

　　樣式表中不要含有過多的濾鏡表達式和repeat關鍵字等，這些屬性會降低網頁的渲染性能。若要重復背景圖片，那么原圖的寬高各不小于8px。

　　}

　　12.避開CSS Hack

　　所謂“CSS Hack”，就是在樣式表中加入少許特殊符號，讓能夠辨識不同符號的瀏覽器在同一個元素上計算出來的樣式各不相同。出現CSS Hack的原因就在于老式的瀏覽器(諸如飽受詬病的Internet Explorer 6)對同一套樣式表的計算結果與其它瀏覽器的并不相同，這就很有可能會造成版式上的錯亂。因此在過去，我們通常要針對個別怪異的瀏覽器撰寫有針對性的CSS。如width: 300px; _width: 200px;對其它瀏覽器來說，該選擇器的寬度值應為300個像素，但IE 6能夠辨識出底線，因此它計算出的寬度就是200個像素。

　　13.減少使用影響性能的屬性

　　樣式表中不要含有過多的濾鏡表達式和repeat關鍵字等，這些屬性會降低網頁的渲染性能。若要重復背景圖片，那么原圖的寬高各不小于8px。

感謝各位的閱讀，以上就是“CSS的命名和書寫規范”的內容了，經過本文的學習后，相信大家對CSS的命名和書寫規范這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！