隨著CSS的發(fā)展，使用CSS有語義化的命名約定和CSS層的分離，將有助于它的可擴展性，性能的提高和代碼的組織管理。

在我前面的文章中討論很多關于CSS的問題都可以通過使用一個適當?shù)腃SS策略來避免。在這篇文章里，我將著重于討論使用一種方法或者一個命名規(guī)則所帶來的好處。

這里有很多可供使用的前端方法和命名規(guī)則，每個都有自己的優(yōu)缺點。在幾乎所有的案例中CSS被分割成更易于管理的代碼“塊”。CSS的這種分割方式定義了每一種方法。
命名規(guī)則

一個可靠命名規(guī)則的重要性是不可忽視的。就像組織結構帶來的好處一樣，這里有很多性能上的優(yōu)勢讓你能夠堅持地，有責任感地去命名你的選擇器。

正確使用任何規(guī)則將會在大型項目減少與CSS相關的憂慮而發(fā)揮關鍵的作用
BEM

最流行的命名規(guī)則之一就是BEM（block：塊，Element：元素，Modifier：修飾符）。通過給每個元素添加它的父級block模塊作為前綴，使得目標的安全性變得更加簡單了。BEM還有助于消除頁面和body類對嵌套或者附加樣式依賴。

CSS Code復制內(nèi)容到剪貼板

.block {}   
.block__element {}   
.block–modifier {}  

上面的例子展示了一個BEM項目的類結構，下劃線（__）被用來區(qū)分元素，而用連字符(–)是用來修飾元素的。下面是一個現(xiàn)實世界的例子…

CSS Code復制內(nèi)容到剪貼板

.product-details {}   
.product-details__price {}   
.product-details__price–sale {}  

BEM中的一個圈套是引誘在修飾部分中添加多種用途的樣式類。大的，小的，綠色的或者醒目的等修飾選擇器被提出引入到標記中，這在不久的將來將會發(fā)生改變。

CSS Code復制內(nèi)容到剪貼板

.product-details {}   
.product-details__title {}   
.product-details__title–small {}  

像大多數(shù)的多用途類一樣，在項目一開始的時候意圖很明顯，但是當一個設計改變的時候常常會導致矛盾的CSS。
SUIT

Suit起源于BEM，但是它對組件名使用駝峰式和連字號把組件從他們的修飾和子孫后代中區(qū)分出來。

CSS Code復制內(nèi)容到剪貼板

.u-utility {}    
.ComponentName {}    
.ComponentName–modifierName {}    
.ComponentName-descendantName {}    
.ComponentName.is-someState {}   

通過消除潛在的混亂連字符號連接元素名來使得選擇器的可讀性更強。

CSS Code復制內(nèi)容到剪貼板

.ProductDetails {}   
.ProductDetails-price {}