合理的避免使用ID

一般情況下ID不應該被應用於樣式。

ID的樣式不能被復用並且每個頁面中你只能使用一次ID。

使用ID唯一有效的是確定網頁或整個站點中的位置。

盡管如此，你應該始終考慮使用class，而不是id，除非只使用一次

另一個反對使用ID的觀點是含有ID選擇器權重很高。

CSS選擇器中避免標簽名

當構建選擇器時應該使用清晰， 準確和有語義的class(類)名。不要使用標簽選擇器。 如果你只關心你的class(類)名
，而不是你的代碼元素，這樣會更容易維護。

如果你只使用具有實際意義的class(類)名，
並且不使用元素選擇器，那麽你只需要改變你的html標記，而不用改動你的CSS。

縮寫屬性

CSS提供了各種縮寫屬性（如 font 字體）應該盡可能使用，即使在只設置一個值的情況下。

使用縮寫屬性對於代碼效率和可讀性是有很有用的。

//不推薦
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

//推薦
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
 

0 和 單位

省略“0”值後面的單位。不要在0值後面使用單位，除非有值。

//不推薦
padding-bottom: 0px;
margin: 0em;

//推薦
padding-bottom: 0;
margin: 0;

十六進制表示法

在可能的情況下，使用3個字符的十六進制表示法。
顏色值也允許這樣表示，
3個字符的十六進制表示法更簡短。

始終使用小寫的十六進制數字。

//不推薦
color: #FF33AA;

//推薦
color: #f3a;

聲明順序

這是一個選擇器內書寫CSS屬性順序的大致輪廓。這是為了保證更好的可讀性和可掃描重要。

作為最佳實踐，我們應該遵循以下順序（應該按照下表的順序）：

結構性屬性：

1、display

2、position, left, top, right

3、overflow, float, clear

4、margin, padding

表現性屬性：

1、background, border

2、font, text

CSS引號

屬性選擇器或屬性值用雙引號（""），而不是單引號（‘‘）括起來。
URI值（url()）不要使用引號。

媒體查詢位置

盡量將媒體查詢的位置靠近他們相關的規則。不要將他們一起放到一個獨立的樣式文件中，或者丟在文檔的最底部。這樣做只會讓大家以後更容易忘記他們。

Don‘t use @import

與<link>相比，@import較慢，增加額外的頁面請求，並可能導致其他不可預見的問題。

<!--推薦-->
<link rel="stylesheet" href="core.css">

<!-- 不推薦 -->
<style>
    @import url("more.css");
</style>

class 命名

保持 class 命名為全小寫，可以使用中劃線（不要使用下劃線和 camelCase 命名）。中劃線應該作為相關類的自然間斷。(例如，.btn 和 .btn-danger)。

避免過度使用簡寫。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。

class 的命名應該盡量短，也要盡量明確。

使用有意義的名稱；使用結構化或者作用目標相關，而不是抽象的名稱。

命名時使用最近的父節點或者父 class 作為前綴。

使用 .js-* 來表示行為(相對於樣式)，但是不要在 CSS 中包含這些 class。

CSS命名規範(規則)常用的CSS命名規則

頭：header　

內容：content/container

尾：footer

導航：nav　

側欄：sidebar　

欄目：column　

頁面外圍控制整體佈局寬度：wrapper

左右中：left right center　　

登錄條：loginbar　

標誌：logo　

廣告：banner　

頁面主體：main　

熱點：hot　

新聞：news　

下載：download　

子導航：subnav　

菜單：menu　

子菜單：submenu　

搜索：search　　

友情鏈接：friendlink　

頁腳：footer　

版權：copyright　

滾動：scroll　

內容：content