怎樣寫出一套可維護的CSS庫

這篇文章將為大家詳細講解有關怎樣寫出一套可維護的CSS庫，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

怎樣寫出一套可維護的CSS庫？不妨談談CSS的設計模式/架構吧。接下來將為你講述三個主流的CSS設計思想和一個最近通用的CSS設計思想：OOCSS、SMACSS、BEMCSS、METACSS。

OOCSS

OOCSS,字面意思是面向對象的CSS，是由Nicole Sullivan提出的css理論,雖說是理論，實則更像一種程序員間約定的規范：

• Separate structure and skin（分離結構和主題）減少對 HTML 結構的依賴

• Separate container and content（分離容器和內容）增加樣式的復用性

在 OOCSS 的觀念中，強調重復使用 class，而應該避免使用 id 作為 CSS 的選擇器。 OOCSS追求元件的復用，其class命名更為抽象，一般不體現具體事物，而注重表現層的抽取。

SMACSS

smacss通過一個靈活的思維過程來檢查你的設計過程和方式是否符合你的架構

設計的主要規范有三點：

• Categorizing CSS Rules（為css分類）

• Naming Rules（命名規范）

• Minimizing the Depth of Applicability（最小化適配深度）

Categorizing CSS Rules

這一點是SMACSS的核心。SMACSS認為css有5個類別，分別是： 1 Base 2 Layout 3 Module 4 State 5 Theme or Skin

Base Rules

基礎規范,描述的是任何場合下，頁面元素的默認外觀。它的定義不會用到class和ID。css reset也屬于此類。常見的如normalize.css,CSS Tools

Layout Rules

布局規范,元素是有層次級別之分的，Layout Rules屬于較高的一層，它可以作為層級較低的Module Rules元素的容器。左右分欄、柵格系統等都屬于布局規范。布局是一個網站的基本，無論是左右還是居中，甚至其他什么布局，要實現頁面的基本瀏覽功能，布局必不可少。SMACSS還約定了一個前綴l-/layout-來標識布局的class。舉個最普遍的例子。

.layout-header {} .layout-container {} .layout-sidebar {} .layout-content {} .layout-footer {}

Module Rules

模塊規范,模塊是SMACSS最基本的思想，同時也是大部分CSS理論的基本，將樣式模塊化就能達到復用和可維護的目的，但是SMACSS提出了更具體的模塊化方案。SMACSS中的模塊具有自己的一個命名，隸屬于模塊下的類皆以該模塊為前綴，例子如下：

.todolist{} .todolist-title{} .todolist-image{} .todolist-article{}

可以看到todolist作為一個模塊，包含了title，image，article等組件，同時還可以加上如.todolist-background-danger等修飾類，在模塊內可以使用其名稱做前綴任意組織模塊結構，但目的是讓其變得更易用，提高可擴展性和靈活度，如果只是為了修飾而修飾，寫出大量沒有任何復用性的類，便是一種弄巧成拙的做法。

State Rules

狀態規范,這個應該很多前端開發者都很好理解，描述的是任一元素在特定狀態下的外觀。例如，一個消息框可能有success和error等狀態。與OOCSS抽取修飾類的方式的不同，SMACSS是抽取更高級別的樣式類，得到更強的復用性，如隱藏某個元素的寫法：

.is-hidden{ display: none; }

Theme Rules

主題規范,描述了頁面主題外觀，一般是指顏色、背景圖。Theme Rules可以修改前面4個類別的樣式，且應和前面4個類別分離開來（便于切換，也就是“換膚”）。SMACSS的Theme Rules不要求使用單獨的class命名，也就是說，你可以在Module Rules中定義.header{ }然后在Theme Rules中也用.header { }來定義需要修改的部分(后加載覆蓋前加載樣式內容)

Naming Rules

命名規范

按照前面5種的劃分:

Base Rules(Pass)

Layout Rules用l-或layout-這樣的前綴，例如：.l-header、.l-sidebar。

Module Rules用模塊本身的命名，例如圖文排列的.media、.media-image。

State Rules用is-前綴，例如：.is-active、.is-hidden。

Theme Rules如果作為單獨class，用theme-前綴，例如.theme-a-background、.theme-a-shadow。

Minimizing the Depth of Applicability

最小適配深度原則，簡單的例子：

/* depth 1 */ .sidebar ul h4 { }  /* depth 2 */ .sub-title { }

兩段css的區別在于html和css的耦合度(這一點上和OOCSS的分離容器和內容的原則不謀而合)。可以想到，由于上面的樣式規則使用了繼承選擇符，因此對于html的結構實際是有一定依賴的。如果html發生重構，就有可能不再具有這些樣式。對應的，下面的樣式規則只有一個選擇符，因此不依賴于特定html結構，只要為元素添加class，就可以獲得對應樣式。

當然，繼承選擇符是有用的，它可以減少因相同命名引發的樣式沖突（常發生于多人協作開發）。但是，我們不應過度使用，在不造成樣式沖突的允許范圍之內，盡可能使用短的、不限定html結構的選擇符。這就是SMACSS的最小化適配深度的意義。

BEMCSS

BEM 分別代表著：Block（塊）、Element（元素/子塊/組成部分）、Modifier（修飾符），是一種組件化的 CSS 命名方法和規范，由俄羅斯 Yandex 團隊所提出。其目的是將用戶界面劃分成獨立的（模）塊，使開發更為簡單和快速，利于團隊協作開發。

特點

組件化/模塊化的開發思路。 書寫方式解耦化，不會造成命名空間的污染，如：.xxx ul li 寫法帶來的潛在嵌套風險。 命名方式化扁平，避免樣式層級過多而導致的解析效率降低，渲染開銷變大。 組件結構獨立化，減少樣式沖突，可以將已開完成的組件快速應用到新項目中。 有著較好的維護性、易讀性、靈活性。 規則

BEM的命名模式在社區中有著不同方式，以下為 Yandex 團隊所提出的命名規則為（本文中的代碼使用該規則）：

.[Block 塊]__[Element 元素]_[Modifier 修飾符] 不同的命名模式，區別在于BEM之間的連接符號不同，依個人而定：

.[Block 塊]__[Element 元素]--[Modifier 修飾符] 任何一種規范，都是基于實際需求而定，便于團隊開發和維護擴展，每個規范都是經過合理評估后所得出的一種“思路”和“建議”。

Block（塊）

是一個獨立的實體，即通常所說的模塊或組件。

例：header、menu、search

規則 塊名需能清晰的表達出，其用途、功能或意義，具有唯一性。 塊名稱之間用-連接。 每個塊名前應增加一個前綴，這前綴在 CSS 中有命名空間（如：m-、u-、分別代表：mod 模塊、ui 元件）。 每個塊在邏輯上和功能上都相互獨立。 由于塊是獨立的，可以在應用開發中進行復用，從而降低代碼重復并提高開發效率。 塊可以放置在頁面上的任何位置，也可以互相嵌套。 同類型的塊，在顯示上可能會有一定的差異，所以不要定義過多的外觀顯示樣式，主要負責結構的呈現。 這樣就能確保塊在不同地方復用和嵌套時，增加其擴展性。 綜上所述，最終我們可以把BEM規則最終定義成：

.[命名空間]-[組件名/塊]__[元素名/元素]--[修飾符] 情景 需要構建一個 search 組件。

寫法 .m-search{} 結構

如果打算開發一套框架，可以使用具有代表性的縮寫，用來表示命名空間：Element UI(el-)、Ant Design(ant-)、iView(ivu-)。

Element（元素）

是塊中的組成部分，對應塊中的子元素/子節點。

例：header title、menu item、list item

規則 元素名需能簡單的描述出，其結構、布局或意義，并且在語義上與塊相關聯。 塊與元素之間用__連接。 不能與塊分開單獨使用。 塊的內部元素，都被認為是塊的子元素。 一個塊中元素的類名必須用父級塊的名稱作為前綴，因此不能寫成：block__elem1__elem2。 情景 search 組件中包含 input 和 button，是列表中的一個子元素。

寫法 .m-search{} .m-search__input{} .m-search__button{} 結構

Search 原則上書寫時不會出現兩層以上的嵌套，所有樣式都為平級，嵌套只出現在 .m-block_active ，狀態激活時的情況。

Modifier（修飾符）

定義塊和元素的外觀、狀態或類型。

例：color、disabled、size

規則 修飾符需能直觀易懂表達出，其外觀、狀態或行為。 修飾符用_連接塊與元素。 修飾符不能單獨使用。 在必要時可進行擴展，書寫成：block__elem_modifier_modifier，第一個modifier表示其命名空間。 情景 假定 search 組件有多種外觀，我們選擇其中一種。并且在用戶未輸入內容時，button 顯示為禁用樣式。

寫法 .m-search{} .m-search_dark{} .m-search__input{} .m-search__button{} .m-search__button_disabled{} 結構

Search

小結

很多人覺得 BEM 寫法難看，審美本是“智者見智，仁者見仁”的事。剛剛接觸可能是會覺得有點奇怪，但所有東西都有一個適應過程。如果僅僅為了好看，規避其優點，我認為得不償失。個人建議可以嘗試使用 BEM 規范來書寫代碼。

BEM 命名會使得 Class 類名變長，但經過 GZIP 等壓縮后，文件的體積其實并無太大影響。

就和早年提出 CSS語義化 一樣，不要為了語義而去語義，語義化本身的作用就是幫助大家更好的識別代碼，所有的規范都是基于項目的發展和團隊的協作，團隊可以根據成員的意愿選擇最合適的方式。

METACSS

一些寫在全局的通用方法，是SMACSS中通用方法思想的分支，一般以css屬性和想到達到的效果命名，通常以一個css屬性為一個單位

表示屬性的：

.df { display: flex; } 復制代碼

表示功能的：

.tcut {     text-overflow: ellipsis;   white-space: nowrap;   overflow: hidden;   } 復制代碼

以此類推，封裝好放到全局來使用，快速添加屬性來開發頁面。

smacss覆蓋了所有的細節點；bemcss著重css的命名和語義化；oocss著重可復用，把每一個dom節點當成一個對象，是css返璞歸真的思想；metacss著重快速開發快速添加屬性，顆粒度更細，通過添加類目來添加屬性，不必再去修改css來修改樣式。

關于怎樣寫出一套可維護的CSS庫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。