這篇文章主要介紹了CSS代碼風(fēng)格的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)服務(wù)電話：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁制作領(lǐng)域十余年，包括花箱等多個(gè)行業(yè)擁有多年的網(wǎng)站維護(hù)經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)，為企業(yè)錦上添花。

CSS 代碼風(fēng)格

基本設(shè)置

2 空格縮進(jìn)

UTF-8 編碼

空白與格式

大括號與選擇器之間留空，冒號后面留空，注釋內(nèi)外前后留空。

理由：據(jù)說這樣比較漂亮。

/* 我是注釋 */

div { /* 我是注釋 */ }

span {

  color: red; /* 我是注釋 */

}

在只有一條樣式時(shí)允許和選擇器寫到同一行，不強(qiáng)制。

理由：寫三行太占屏幕空間。

一個(gè)選擇器中有多個(gè)樣式聲明時(shí)每條寫一行。

理由：使報(bào)錯(cuò)可以精確到具體的規(guī)則上，便于排錯(cuò)。

多個(gè)選擇器使用逗號隔開時(shí)寫在不同的行，大括號不要另起一行。

理由：修改時(shí)不容易漏掉逗號后面的選擇器。

div,

span {

  color: red;

  font-size: 12px;

}

每條樣式聲明后面都加上那個(gè)分號。

理由：復(fù)制起來方便。

所有最外層引號使用雙引號。

理由：與 HTML 保持一致。

用逗號分隔的多個(gè)樣式值寫成多行。

理由：便于閱讀與編輯。

.block {

  box-shadow: 0 0 0 rgba(#000, 0.1),

              1px 1px 0 rgba(#000, 0.2),

              2px 2px 0 rgba(#000, 0.3),

              3px 3px 0 rgba(#000, 0.4),

              4px 4px 0 rgba(#000, 0.5);

}

功能限定

避免使用 ID 選擇器。

理由：權(quán)重太高，不易維護(hù)。

禁止使用 @import 引入 CSS 文件。 理由：各種坑不解釋。

命名與模塊化

0 值的單位建議省略，但不強(qiáng)制。

理由：大部分 0 值的單位是沒用的。

16 進(jìn)制顏色值中的字母統(tǒng)一小寫。

理由：切換大小寫麻煩。

類名中的字母一律小寫。

理由：它不區(qū)分大小寫，難道有人想統(tǒng)一大寫？

類名中只使用字母、數(shù)字以及“-”。

理由：要是沒有限制的話我怕一些猴子使用阿拉伯文。

.hello {} /* OK */

.module-title {} /* OK */

.panel-level1 {} /* OK */

.導(dǎo)航欄 /* Fuck */

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS代碼風(fēng)格的示例分析”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!