css命名規則

OOCSS（Object Oriented CSS）

  1. 分離結構與樣式（Separate container and content）：結構是元素標籤，樣式是指顏色，減少依賴結構與樣式間的影響，應該要增加樣式的可重覆性。

  2. 分離HTML與CSS（Separate structure and skin）：是指盡量將可共用的樣式單獨抽離出來給class。

BootStrap便是根據OOCSS規範寫的，我們可以觀察bootstrap 的文件

<div class="alert alert-dark alert-dismissible" role="alert">
  A simple primary alert-check it out!
</div>

  • 可看到alert為規範預設的警告樣式

  • alert-dark為規範警告樣式的顏色

  • alert-dismissible 為添增關閉按鈕的樣式

這樣的結構與樣式抽離可以讓開發者透過組合來產生更簡單的維護與管理，這樣若客戶需要改哪邊的小功能時，只需要把部分的零件拿掉，OOCSS追求的是元件的重覆使用。

SMACSS

（Scalable & Modular Architecture for CSS）更具結構與命名規則的限制，透過以下五種分類概念，把class的命成拆的更細節。

  • SMACSS把CSS分成五種結構：（Categorizing CSS Rules）：

    • Base、Layout、Module、State、Theme

  • 命名規則：為CSS做分類，id與css的使用不會是獨立性，會透過dash 去做分類，命名規則（Naming Rules）對於SMACSS是很重要的。

Base 基礎規範

是指整份網站文件中，最基礎的規範是什麼，例如reset normalize.css 文件，在這份文件中不會使用到任何class與id，若使用sass，可以直接用@import引入

*::after,*::before,* { margin: 0; padding: 0; } 
input[type=text] { border: 1px solid #000; } 
a { color: #269; } 
a:hover { color: #ccc; }

layout 佈局規範

使指網頁的佈局，例如像是grid網頁佈局的規範，在SMACSS中會使用前綴詞，例如l-list ，其中的"l"代表layout中的 "l"，這樣幾個月後再回頭看自己的CSS命名就會很清楚的知道這個layout 代表的是哪邊的list。

.l-fixed #article {
  width: 600px;
}
.l-fixed #sidebar {
  width: 200px;
}

Module 模組規範

是指整個網頁的區塊視為一個一個的模組，例如.header-img 前綴詞代表的是模組區塊的名稱，後面代表的是元素名稱。

.l-grid {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.l-grid > li {
  display: inline-block;
  margin: 0 0 10px 10px;
}

state 狀態規範

網頁中有不同的狀態顏色或者行為改變所呈現的結果，例如success、error等。

.tab {
  background-color: purple;
  color: white;
}
.is-tab-active { //state 
  background-color: white;
  color: black;
}

theme 主題規範

是指網頁外觀如顏色、圖片，在SMACSS中不鼓勵使用單獨的 class名稱，可以在這個theme規範中加入網頁顏色來覆蓋掉先前的規範所定義的顏色。

.theme-border {
   border-color: purple;
}
.theme-background {
   background: linear-gradient( … );
}

SMACSS比OOCSS 更具語意化，透過分類的方式自己定義class名稱，降低對於html結構的依賴。

BEM（Block，Element，Modifier）

由區塊、元素與修飾狀態

  • Block：　是頁面獨立的區塊，每個頁面都可以看成很多區塊的組合。

  • Element：是指區塊中的元素

  • Modifier：是指描述Block或者Element的屬性或狀態

透過上面三點，結合再一起的class命名就是BEM

.header{   }          // 區塊
.header__element{}   //  區塊 + 區塊裡的元件
.header__element--modifier{}  // 區塊 + 區塊裡的元件 + 狀態

結論

以上三種命名規範，無非圍繞著讓結構更乾淨且容易與內容分離，將可變動與修改的次數比例降低，沒有什麼命名的規則是最好的，只有最適合團隊維護才是最好用的，這邊分享幾項我覺得最基本的命名規則：

  1. 一致性：可分成命名標示與命名邏輯的一致性，無論使用大駝峰、小駝峰或- dash等使用方式，文件規範上一致性是相當重要的，才不會前面是打.header-title，後面突然變成了.headerTitle，讓人看得一頭霧水。

  2. 階層分類：把CSS的階層從上到下的排好，最成功的分類就是一看到命名規則就可以馬上找到所代表的區塊元件，這樣能力是要靠經驗及多寫多練才可以養成的，最好檢視自己進步的方法，就是去看舊的code，若是隔了3個月後，依然可以透過之前的命名很清楚地找到自己寫程式的邏輯，那就代表成功啦!

  3. 方便維護：可以透過小更動就可以更改成自己想要的樣式，這需要透過在class 命名時就要安排好的，例如可以透過只改寫一行就可以更動所有的按鈕顏色，學習pure.css或者bootstrap的文件是個不錯的練習方式喔

Previous兩欄式NextJS 基本使用

Last updated

Was this helpful?