CSS中的層分離編程示例分析

本篇文章為大家展示了CSS中的層分離編程示例分析，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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

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

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

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

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

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

1. .block {}   

2. .block__element {}   

3. .block--modifier {}  

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

1. .product-details {}   

2. .product-details__price {}   

3. .product-details__price--sale {}  

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

1. .product-details {}   

2. .product-details__title {}   

3. .product-details__title--small {}  

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

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

 .u-utility {}    

.ComponentName {}    

.ComponentName--modifierName {}    

.ComponentName-descendantName {}    

.ComponentName.is-someState {}   

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

1. .ProductDetails {}   

2. .ProductDetails-price {}   

3. .ProductDetails-title--sale {}  

加前綴

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

1. .s-product-details {}   

2. .t-product-details {}   

3. .js-product-details {}  

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

元素可以以同樣的方式定義或者使用基類和修飾類...

XML/HTML Code復制內容到剪貼板

1. <button class="button">Button</button>  

2. <button class="button button-checkout">Checkout Button</button>  

3. <button class="button button-search">Search Button</button>  

從一方面說明在Sass partials中加前綴對于當在文件夾中刪除必要的存儲partials時對一個很大的項目文件定位是很有幫助的。這種方法被使用于ITCSS中。

你選擇什么都沒有問題，重要的是記住你的選擇,并將他們應用到整個項目中。
方法

隨著命名規則的增加，CSS變得更安全，更高效了。由于較小的CSS文件和更少的權重問題，所需要的嵌套選擇器將會減少。

盡管有這些改進你仍可以像下面的這個例子使用復制的CSS來完成樣式。

1. .product-details__title {   

2.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   

3.     text-transform: uppercase;   

4.     color: #333;   

5. }   

6. .latest-news__title {   

7.    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   

8.    text-transform: uppercase;   

9.    color: #FF0000;   

10. }  

這就是前端的方法的由來，將你的CSS劃分層次會有助于防止重復的樣式和大分組的選擇器。共同或者基礎的樣式被分開定義，而更具體或者修飾的樣式被添加到繼承樣式的頂部。
OOCSS

面向對象CSS有兩個主要的原則第一是表現與結構分離，第二是容器與內容分離。這兩個原則的設計是用來通過創建可復用的CSS模塊以提高性能。

表現與結構分離：

1. <div class="box-padded product-image"></div>   

2. <div class="box-padded product-description"></div>   

3.   

4. .product-image {   

5.        width: 400px;   

6.     overflow: hidden;   

7. }   

8.   

9. .product-description {   

10.     width: 500px;   

11.     min-height: 200px;   

12.     overflow: auto;   

13. }   

14.   

15. .box-padded {   

16.     background: #FFF;   

17.    padding: 10px;   

18. }   

19. ```  

內容與容器分離：

1. <div class="wrapper recently-viewed"></div>   

2. <div class="wrapper suggested-products"></div>   

3.   

4. .wrapper {   

5.    width: 400px;   

6.    margin: 0 auto;         

7.    overflow: hidden;   

8. }   

9. .recently-viewed {   

10.        border: solid 1px #ccc;   

11.        background: #FFF;   

12.    color: ￡666;    

13. }   

14. .suggested-products {   

15.        border: solid 1px #ccc;   

16.        background: #FFF;   

17.    color: ￡666;    

18. }  

這種面向對象的工作方式創建了一系列可以用來設置CSS屬性的多種用途類。這種工作方式可以提高站點性能和維護以及保持CSS文件的DRY原則。

即使標記的多個主題是一致的，一個面向對象方法可以添加矯正的CSS用來覆蓋或刪除不想要的繼承樣式。

CSS Code復制內容到剪貼板

1. product-delivry.padded-box {   

2.    padding:0   

3. }  

SMACSS

SMACSS像OOCSS一樣以減少重復樣式為基礎。然而SMACSS使用一套五個層次來劃分CSS給項目帶來更結構化的方法。

Base - HTML elements & defaults
Layout -Page structure
Module - Re-usable code bloks
State - Active/Inactive etc
Theme - Typography and colour schemes etc

這個增加的組織和結構提高了輸出的CSS的效率。這個方法同樣適用于需要添加或者刪除層次的地方。
ITCSS

ITCSS是一個完全不同于SMACSS的全新的方法，它創造了一系列的層次來管理依賴關系和促進可擴展性。基礎的層次包括通用和廣泛的選擇器。頂部的層次包含了局部模塊具體化的選擇器。整套的層次如下...

    Tools?&mdash;?Default mixins & functions
    Generic?&mdash;?Normalize, resets, box-sizing
    Base?&mdash;?HTML elements
    Objects?&mdash;?Design patterns
    Components?&mdash;?Modules & blocks of code
    Trumps?&mdash;?Helpers & overrides

每個層次增加的權重，只允許添加額外的要求。

以上面同樣的例子，CSS將會被劃分為基礎層和組件層。

1. p {   

2.     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   

3.     font-size: 14px;   

4. }   

5. .product-details__title {   

6.     color: #333;   

7. }   

8. .latest-news__title {   

9.     color: #FF0000;   

10. }  

使用前請注意

你僅僅是可以決定使用上述策略之一，但是你不是全部都得靠它。如果某一層次并不適合你的項目那么就不要使用它了。你也可以改變或者增加一些東西來使得它適應你的項目和團隊的需求。命名規則或者方法并不是每個時候都能100%的適合所有項目。

你也可以創建你自己的方法或者命名規則，允許一個量身定制的解決方案來完美的適應你項目的需求。定制解決方案的一個不足之處就是缺乏社區的支持和文檔。

上述內容就是CSS中的層分離編程示例分析，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。