Skip to main content

[Note] 模組化 CSS(Modularity CSS)

keywords: modularity, 模組化 , OOCSS#

統整不同設計模式

模組化的 CSS 通常包含這幾個部分:

  • Module:又稱作 object, block , component,是可以重複使用、自我獨立的樣式,像是 media object, navigation, page header。
  • Child Element:一個具體可切分的模組,不能獨立存在,例如 media object image, navigation tab, page header logo。
  • Module Modifier:又稱作 skin 或 theme,用來改變 module 的外觀,例如 left/right media objects, vertical/horizontal navigation。

模組化的 CSS 通常可以分成這幾個類別:

  • Base:HTML 元素的預設樣式,例如 a, li, h1
  • Layout:控制 module 如何被排版,但不是視覺上的外觀,例如 .l-centered, .l-grid, .l-fixed-top
  • Modules :視覺上可以重複使用、獨立的 UI 元件,例如 .m-profile, .m-card, .m-modal
  • State:通常透過 JavaScript 來新增或移除,例如 .is-hidden, .is-collapsed, .is-active
  • Helper:又稱為 utility,獨立於 module,小小易用的樣式,例如 .h-uppercase, .h-nowrap, .h-muted

模組化的 CSS 通常建議:

  • 不要使用 IDs
  • 不要嵌套超過一層以上
  • 為 child element 添加 class
  • 跟隨命名規則
  • 使用前綴命名 class

常見的 CSS 模組化設計模式

以下說明幾種常見的模組化 CSS 慣例/設計模式:

OOCSS#

在 OOCSS 中,物件(object)指稱的是一個區塊(block)或元件;而皮膚/主題(skinned / themed)指稱的是修飾符(modifier)

Context Independent:將元件從脈絡中獨立出來#

一個 object 不論你放在哪裡,都應該要看起來一樣,而不會隨著它的脈絡(context)而變。

舉例來說,當導覽列的按鈕是藍色,而內文的按鈕是綠色時,你不應該在導覽列或內文中定義該按鈕顏色,而是把按鈕的顏色抽出成一個獨立的 class,稱作 modifier如此它們將可以在其他地方被覆用,而不會只被限定在某個區塊

Skinning (aka Theming)#

將 object 的結構從樣式中抽離出來,每一個元件不論它的外觀為何,都應該有相同的 HTML 結構。

Use Classes:不同的 HTML 結構可以套用相同的樣式。#

使用 class 來為 object 和他們的子元素命名,因此即使 HTML 的結構改變了,也不會影響到樣式。

舉例來說,我們透過當我們以 class 來命名標題的樣式時,.headline,如此當你的結構從 <h1> 換成 <h4> 時一樣可以有同樣的外觀,因此不建議寫 h1 {...} ,因為結構一但改變,樣式就無法套用了。

不要使用 ID#

過去會使用 ID 來當作命名空間(namespace),如此可以指稱到該 ID 內的元素。但由於模組化 CSS 中強調的是重複使用,因此使用 ID 意味著你的這個物件是無法被覆用的。

BEM - Block, Element, Modifier#

區塊(Block)#

Block 指的是可以透過邏輯或功能從頁面中獨立出來的元件。

首先,block 是可以嵌套在另一個 block 中的(nestable),它們可以被包含在其他的 block 中而不會壞掉。例如,當我們把按鈕放在導覽列中時,按鈕的樣式並不會因此而壞掉。

接著,block 是可以被重複使用的(repeatable)

元素(Element)#

Element 是組成 block 的部分,但是它不能在 block 的外部被使用。例如導覽列選單(navigation menu)中的選項(item)。

修飾符(Modifier)#

Modifier 用來定義某一 block 的外觀和行為。例如選單 block 可能會根據 modifier 的不同而從水平變成垂直。

不要使用嵌套式的 CSS 選擇器#

在 BEM 中不建議使用嵌套式的 CSS 選擇器 .btn .btn-price 這種用法(如果可以不用就不要用),因為這會使得它們的權重增加,使得它們變得較難覆用,因此應該要寫成 .btn__price 就好。

但有一個例外是,當根據 modifiers 用來修改某 element 或 block 的樣式時,可以使用 .btn__text .btn--orange

命名規則(Naming Convention)#

.block-name__element--modifier
  • block-name 會用小寫
  • block-name 裡面如果有多個單字,用 - 區隔

SMACSS#

SMACSS 中最重要的是分類(Categorization)的概念,他認爲在 CSS 系統中會包含這幾種類別:

  1. Base:指的是 HTML 元素的預設樣式,像是 links, paragraph, headlines
  2. Layout:將頁面切分成區塊(section),並包含一個以上的模組(module)。
  3. Module:又稱作 object 或 block,是可以重複使用、模組化的設計,例如 button, media object, product list 等等。
  4. State:用來描述 module 或 layout 看起來的狀態,通常會透過 JavaScript 來增添,例如 hidden, expanded, active
  5. Theme:描述當一個 theme 套用之後,module 或 layout 會變成什麼樣子。

命名原則#

  • l- 的前綴用來描述 layout : l-inline
  • m- 的前綴用來描述 module: m-callout
  • is- 的前綴用來描述 state: is-collapsed

參考#