CSS中有哪些命名和書寫規(guī)范

這篇文章主要介紹了CSS中有哪些命名和書寫規(guī)范，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)主營(yíng)文成網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開(kāi)發(fā),文成h5小程序定制開(kāi)發(fā)搭建,文成網(wǎng)站營(yíng)銷推廣歡迎文成等地區(qū)企業(yè)咨詢

選擇器的命名規(guī)范

1.模塊化命名

例如：

• 與布局相關(guān)的樣式以“g”為開(kāi)頭。如“g-content”和“g-header”；

• 與掛鉤相關(guān)的樣式以“j”為開(kāi)頭。如“j-open”和“j-request”；

• 與元件相關(guān)的樣式以“m”為開(kāi)頭。如“m-dropMenu”和“m-slider”；

• 與狀態(tài)相關(guān)的樣式以“s”為開(kāi)頭。如“s-current”和“s-selected”；

• 與工具相關(guān)的樣式以“u”為開(kāi)頭。如“u-clearfix”和“u-ellipsis”。

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

以上的說(shuō)明只是舉例，大家可以根據(jù)項(xiàng)目需求自定義開(kāi)頭的字符，這樣做的目的是使CSS代碼整潔易維護(hù)。

在這里小編建了一個(gè)前端學(xué)習(xí)交流扣扣群：132667127，我自己整理的最新的前端資料和高級(jí)開(kāi)發(fā)教程，如果有想需要的，可以加群一起學(xué)習(xí)交流

2.選擇器皆為小寫形式

推薦的寫法：

.g-first-header
{
 line-height: 16px;
}

不推薦的寫法：

.g-FirstHeader
{
 line-height: 16px;
}

3.每個(gè)選擇器獨(dú)占一列

除最后一個(gè)選擇器外，其它每一列選擇器均以逗號(hào)結(jié)尾。若用到兄弟元素選擇器，則相關(guān)符號(hào)的左右兩端均留出一個(gè)半角空格。

推薦的寫法：

.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.避開(kāi)HTML標(biāo)記

構(gòu)建選擇器時(shí)應(yīng)盡量采用語(yǔ)義明確的類別名稱，避開(kāi)HTML標(biāo)記，因?yàn)橐坏〩TML的結(jié)構(gòu)產(chǎn)生更動(dòng)，則與此對(duì)應(yīng)的樣式也就無(wú)效了。盡量將樣式與結(jié)構(gòu)分離，這樣會(huì)使得階層式樣式表在日后更易被維護(hù)。

推薦的寫法：

.g-content .g-item
{
 flex-basis: 20%;
}

不推薦的寫法：

.g-content li
{
 flex-basis: 20%;
}

5.少用ID

ID的唯一性注定了它所對(duì)應(yīng)的元素的樣式就是一次性的，無(wú)法重用，一旦HTML結(jié)構(gòu)發(fā)生變化，套用ID的選擇器就要隨之修改。另一個(gè)重要的原因是：ID的權(quán)重值是最高的，這可能會(huì)導(dǎo)致日后添加的樣式無(wú)法復(fù)寫原先的樣式。

推薦的寫法：

.g-special-content
{
 height: 100px;
 width: 300px;
}

不推薦的寫法：

#special-content
{
 height: 100px;
 width: 300px;
}

屬性的書寫規(guī)范

1.按順序排列屬性

每條規(guī)則下的屬性在書寫時(shí)，應(yīng)按類別進(jìn)行分組，其排列順序如下：

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

2. 大小：height、margin、padding和width等；

3. 版式：color、font、letter-spacing、line-height和text-align等；

4. 背景：background等；

5. 其它：animation和transition等。

2.縮寫屬性

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

推薦的寫法：

.test-selector-1
{
 padding: 3px 5px;
}

不推薦的寫法：

.test-selector-1
{
 padding-top: 3px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
}

3.去除小數(shù)開(kāi)頭的0

推薦的寫法：

.test-selector-2
{
 font-size: .5em;
}

不推薦的寫法：

.test-selector-2
{
 font-size: 0.5em;
}

4.縮寫十六進(jìn)位值

推薦的寫法：

.test-selector-3
{
 background-color: #0b0;
}

不推薦的寫法：

.test-selector-3
{
 background-color: #00bb00;
}

5.合理使用引號(hào)

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

推薦的寫法：

.test-selector-4
{
 font-family: "Microsoft YaHei", "微軟正黑體", "\5b8b\4f53";
}

不推薦的寫法：

.test-selector-4
{
 font-family: "Microsoft YaHei", 微軟正黑體, \5b8b\4f53;
}

個(gè)別屬性的值含有“url（）”字串，開(kāi)發(fā)者需要往其中傳入一個(gè)資源路徑。請(qǐng)注意，在低版本的Internet Explorer中，路徑中的空格有可能無(wú)法被辨識(shí)，導(dǎo)致資源無(wú)法被找到。為保險(xiǎn)起見(jiàn)，不論路徑中是否含有空格，你傳入的路徑兩端最好都加上引號(hào)。

推薦的寫法：

.test-selector-5
{
 background-image: url(“../Images/BacPic.png”);
}

不推薦的寫法：

.test-selector-5
{
 background-image: url(../Images/BackPic.png);
}

6.避開(kāi)！important

“！important”會(huì)給日后的維護(hù)帶來(lái)麻煩，使開(kāi)發(fā)者難以查找樣式問(wèn)題。如果在書寫時(shí)發(fā)現(xiàn)新樣式無(wú)法復(fù)寫舊樣式。通常有兩個(gè)原因：要么新樣式寫在了舊樣式的前面，要么新樣式對(duì)應(yīng)的選擇器的權(quán)重比舊樣式的更低。針對(duì)后一種情況，只要增加新樣式選擇器的權(quán)重值就可以完全避開(kāi)這個(gè)問(wèn)題，無(wú)需用到“！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.規(guī)范注釋

在單列注釋中，星號(hào)與內(nèi)容之間留一個(gè)半角空格。

推薦的寫法：

/* 這是第一段注釋文字。 */
// 這是第二段注釋文字。復(fù)制代碼

不推薦的寫法：

/*這里是一段注釋文字。*/
//這是第二段注釋文字。復(fù)制代碼

在多列注釋中，多個(gè)星號(hào)要排成一條線。星號(hào)與內(nèi)容之間同樣留一個(gè)半角空格。

推薦的寫法：

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

不推薦的寫法：

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

在文檔注釋中，除了要按照多列注釋的寫法以外，還要用標(biāo)識(shí)符來(lái)說(shuō)明文檔中的某一部分，標(biāo)識(shí)符后的冒號(hào)右側(cè)與說(shuō)明文字之間留一個(gè)半角空格。

推薦的寫法：

/**
* @name: 文件名；
* @description: 描述文字；
* @author: 張三、李四；
* @update: 2018年12月19日。
*/

不推薦的寫法：

/**
* @name:文件名；
* @description:描述文字；
* @author:張三、李四；
* @update:2018年12月19日。
*/

8.將標(biāo)準(zhǔn)屬性置于底部

有些屬性在部分瀏覽器中尚未完全標(biāo)準(zhǔn)化，每家瀏覽器開(kāi)發(fā)商對(duì)這些屬性的實(shí)現(xiàn)效果或許并不統(tǒng)一，因此目前需要在開(kāi)頭加入瀏覽器廠商的專有字符串。因此同一個(gè)屬性需要寫多次，但有一條需要注意：將不帶前置標(biāo)記的屬性置于最下方。

推薦的寫法：

.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.注意標(biāo)點(diǎn)符號(hào)

每個(gè)屬性獨(dú)占一列。緊接樣式屬性的冒號(hào)，其后面要留一個(gè)半角空格。值以分號(hào)結(jié)尾。

推薦的寫法：

.test-selector-10
{
 opacity: .5;
}

不推薦的寫法：

.test-selector-10
{
 opacity:.5
}

10.樣式塊間留一空行

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

推薦的寫法：

.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.將過(guò)長(zhǎng)的內(nèi)容折為若干列

同一屬性的值不止一個(gè)或值過(guò)長(zhǎng)時(shí)，以逗號(hào)分割這些值，每個(gè)逗號(hào)后添加一個(gè)空格，過(guò)長(zhǎng)的值可以另起一列。

推薦的寫法：

.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.避開(kāi)CSS Hack

所謂“CSS Hack”，就是在樣式表中加入少許特殊符號(hào)，讓能夠辨識(shí)不同符號(hào)的瀏覽器在同一個(gè)元素上計(jì)算出來(lái)的樣式各不相同。出現(xiàn)CSS Hack的原因就在于老式的瀏覽器（諸如飽受詬病的Internet Explorer 6）對(duì)同一套樣式表的計(jì)算結(jié)果與其它瀏覽器的并不相同，這就很有可能會(huì)造成版式上的錯(cuò)亂。因此在過(guò)去，我們通常要針對(duì)個(gè)別怪異的瀏覽器撰寫有針對(duì)性的CSS。如width: 300px; _width: 200px;對(duì)其它瀏覽器來(lái)說(shuō)，該選擇器的寬度值應(yīng)為300個(gè)像素，但I(xiàn)E 6能夠辨識(shí)出底線，因此它計(jì)算出的寬度就是200個(gè)像素。

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

樣式表中不要含有過(guò)多的濾鏡表達(dá)式和repeat關(guān)鍵字等，這些屬性會(huì)降低網(wǎng)頁(yè)的渲染性能。若要重復(fù)背景圖片，那么原圖的寬高各不小于8px。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中有哪些命名和書寫規(guī)范”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

本文題目：CSS中有哪些命名和書寫規(guī)范
網(wǎng)站網(wǎng)址：http://bm7419.com/article44/jcssee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、App設(shè)計(jì)、服務(wù)器托管、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)