而涉及到具體的變量命名規(guī)范時(shí)，建議是使用BEM規(guī)范，只要遵循一些簡單的原則即可以保證基于組件風(fēng)格的命名一致性。你也可以參考CSS Tricks來獲得更多的細(xì)節(jié)描述。
避免重復(fù)代碼
大部分元素的CSS屬性都是從DOM樹根部繼承而來，這也是其命名為級(jí)聯(lián)樣式表的由來。我們以font屬性為例，該屬性往往是繼承自父屬性，因此我們并不需要再單獨(dú)地為元素設(shè)置該屬性。我們只需要在html或者body中添加該屬性然后使其層次傳遞下去即可:
使用transform添加CSS Animations
不建議直接改變元素的width與height屬性或者left/top/bottom/right這些屬性來達(dá)到動(dòng)畫效果，而應(yīng)該優(yōu)先使用transform()屬性來提供更平滑的變換效果，并且能使得代碼的可讀性會(huì)更好:
Transform的幾個(gè)屬性translate、rotate、scale都具有比較好的瀏覽器兼容性可以放心使用。
不要重復(fù)造輪子
現(xiàn)在CSS社區(qū)已經(jīng)非常龐大，并且不斷地有新的各式各樣的庫開源出來。這些庫可以幫助我們解決從小的代碼片到用于構(gòu)建完整的響應(yīng)式應(yīng)用的全框架。所以如果下次你再碰到什么CSS問題的時(shí)候，在打算擼起袖子自己上之前可以嘗試在GitHUB或者CodePen上搜索可行方案。
盡可能使用低優(yōu)先級(jí)的選擇器
并不是所有的CSS選擇器的優(yōu)先級(jí)都一樣，很多初學(xué)者在使用CSS選擇器的時(shí)候都是考慮以新的特性去復(fù)寫全部的繼承特性，不過這一點(diǎn)在某個(gè)元素多狀態(tài)時(shí)就麻煩了，譬如下面這個(gè)例子:
CSS123456789101112a{ color:#fff; padding:15px;} a#blue-btn { background-color:blue;} a.active { background-color:red;}