ID and class naming
ID和class(類)名總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。
應該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且發生變化的可能性最小。
通用名稱只是多個元素的備用名，他們兄弟元素之間是一樣的，沒有特別意義。
區分他們，使他們具有特殊意義，通常需要為“幫手”。
盡管class(類)名和ID 的語義化對于計算機解析來說沒有什么實際的意義，
語義化的名稱 通常是正確的選擇，因為它們所代表的信息含義，不包含表現的限制。
不推薦
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推薦
.heavy {
font-weight: 800;
}
.important {
color: red;
}
合理的避免使用ID
一般情況下ID不應該被應用于樣式。
ID的樣式不能被復用并且每個頁面中你只能使用一次ID。
使用ID唯一有效的是確定網頁或整個站點中的位置。
盡管如此，你應該始終考慮使用class，而不是id，除非只使用一次。
不推薦
#content .title {
font-size: 2em;
}
推薦
.content .title {
font-size: 2em;
}
另一個反對使用ID的觀點是含有ID選擇器權重很高。
一個只包含一個ID選擇器權重高于包含1000個class(類)名的選擇器，這使得它很奇怪。
// 這個選擇器權重高于下面的選擇器
#content .title {
color: red;
}
// than this selector!
html body div.content.news-content .title.content-title.important {
color: blue;
}
CSS選擇器中避免標簽名
當構建選擇器時應該使用清晰， 準確和有語義的class(類)名。不要使用標簽選擇器。 如果你只關心你的class(類)名
，而不是你的代碼元素，這樣會更容易維護。
從分離的角度考慮,在表現層中不應該分配html標記/語義。
它可能是一個有序列表需要被改成一個無序列表，或者一個div將被轉換成article。
如果你只使用具有實際意義的class(類)名，
并且不使用元素選擇器，那么你只需要改變你的html標記，而不用改動你的CSS。
不推薦
div.content > header.content-header > h2.title {
font-size: 2em;
}
推薦
.content > .content-header > .title {
font-size: 2em;
}
盡可能的精確
很多前端開發人員寫選擇器鏈的時候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區別）。
有時，這可能會導致疼痛的設計問題并且有時候可能會很耗性能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選擇器， 你應該總是考慮直接子選擇器。
考慮下面的DOM:
<article class="content news-content">
<span class="title">News event</span>
<div class="content-body">
<div class="title content-title">
Check this out
</div>
<p>This is a news article content</p>
<div class="teaser">
<div class="title">Buy this</div>
<div class="teaser-content">Yey!</div>
</div>
</div>
</article>
下面的CSS將應用于有title類的全部三個元素。
然后，要解決content類下的title類 和 teaser類下的title類下不同的樣式，這將需要更精確的選擇器再次重寫他們的樣式。
不推薦
.content .title {
font-size: 2rem;
}
推薦
.content > .title {
font-size: 2rem;
}
.content > .content-body > .title {
font-size: 1.5rem;
}
.content > .content-body > .teaser > .title {
font-size: 1.2rem;
}
縮寫屬性
CSS提供了各種縮寫屬性（如 font 字體）應該盡可能使用，即使在只設置一個值的情況下。
使用縮寫屬性對于代碼效率和可讀性是有很有用的。
不推薦
css 代碼:
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;
推薦
css 代碼:
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
0 和 單位
省略“0”值后面的單位。不要在0值后面使用單位，除非有值。
不推薦
css 代碼:
padding-bottom: 0px; margin: 0em;
推薦
css 代碼:
padding-bottom: 0; margin: 0;
十六進制表示法