CSS代碼風格的示例分析

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

CSS 代碼風格

基本設置

2 空格縮進

UTF-8 編碼

空白與格式

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

理由：據說這樣比較漂亮。

/* 我是注釋 */

div { /* 我是注釋 */ }

span {

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

}

在只有一條樣式時允許和選擇器寫到同一行，不強制。

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

一個選擇器中有多個樣式聲明時每條寫一行。

理由：使報錯可以精確到具體的規則上，便于排錯。

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

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

div,

span {

  color: red;

  font-size: 12px;

}

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

理由：復制起來方便。

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

理由：與 HTML 保持一致。

用逗號分隔的多個樣式值寫成多行。

理由：便于閱讀與編輯。

.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 選擇器。

理由：權重太高，不易維護。

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

命名與模塊化

0 值的單位建議省略，但不強制。

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

16 進制顏色值中的字母統一小寫。

理由：切換大小寫麻煩。

類名中的字母一律小寫。

理由：它不區分大小寫，難道有人想統一大寫？

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

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

.hello {} /* OK */

.module-title {} /* OK */

.panel-level1 {} /* OK */

.導航欄 /* Fuck */

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS代碼風格的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!