CSS中的層分離編程方法

我們為大家收集整理了關於CSS中的層分離編程，以方便大家參考。

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

命名規則

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

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

BEM

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

CSS Code復制內容到剪貼板

.block {}

.block__element {}

.block--modifier {}

上面的例子展示了一個BEM項目的類結構，下劃線(__)被用來區分元素，而用連字符(--)是用來修飾元素的。下面是一個現實世界的例子...

CSS Code復制內容到剪貼板

.product-details {}

.product-details__price {}

.product-details__price--sale {}

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

CSS Code復制內容到剪貼板

.product-details {}

.product-details__title {}

.product-details__title--small {}

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

SUIT

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

CSS Code復制內容到剪貼板

.u-utility {}

.ComponentName {}

.ComponentName--modifierName {}

.ComponentName-descendantName {}

.ComponentName.is-someState {}

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

CSS Code復制內容到剪貼板

.ProductDetails {}

.ProductDetails-price {}

.ProductDetails-title--sale {}

加前綴

如果你不想使用如此嚴格或者復雜的命名規則，給每一個選擇器加前綴同樣可以達到這樣的效果。

CSS Code復制內容到剪貼板

.s-product-details {}

.t-product-details {}

.js-product-details {}

這種方法使得它很容易的在表象類中辨別結構類但是只是簡單的寫和理解。在上面的例子中的結構屬性將會被應用到s-product-details選擇器中。主題屬性將應用於t-product-details選擇器。

希望大家可以學會CSS中的層分離編程想了解更多精彩內容，請關注我們的網站!

相關推薦：

CSS每行顯示4個圖片樣式介紹 

CSS屬性縮寫全寫介紹