- 良好的 css 架構
- 預測
- 複用 - 重複利用性、能夠用在更多頁面
- 維護 - 視覺化、共同開發上更好溝通、網頁維護
- 延展
模組化 OOCSS (Object Oriented CSS)
- 元件化
- 結構與樣式分開
- 結構：
position、float、margin、padding… - 樣式：
border、color、background-color…
- 結構：
.mb-20 {
margin-bottom: 20px;
}
- 容器與內容分開
- 容器：排版的框架、grid
- 內容：元件
- 減少對 html 的依賴
- 使用 OOCSS 時，盡量不要用後代選擇器(.header ul)
- OOCSS 應該是直接命名 class，才能夠隨意指定到各 html tag 上
SMACSS (Scalable Modular Architecture for CSS)
-
將結構分類
- base - 標籤預設的樣式
- css reset
- css normalize
- 在 base 裡面不使用 !important
-
layout - 網頁佈局、排版、格線
- 例如
- grid
- header
- sidebar
- content
.layout-header { } .l-header { } - 例如
- module - 模塊
- 頁面上可以單獨存在，並且可以重複使用的元件
- 子模組以原模組名稱加上
-作為名稱.card { } .card-header { } .card-name { } - 例如
- navbar
- tab
-
state - 狀態說明
- active、inactive
- disabled、default
- 命名規則是
.is-*開頭
.is-hidden { } .is-error { } .is-tab-active { } - theme - 主題樣式 (非必要)
- 網站主視覺
- 命名通常以
.theme-*做開頭
- base - 標籤預設的樣式
- 命名規則
- 減少對 html 的依賴
- 使用 SMACSS 時，盡量不要用後代選擇器(.header ul)
- SMACSS 應該是直接命名 class，才能夠隨意指定到各 html tag 上
- 偽元素、@media query 寫在原本 module 的後面
BEM (Block Element Modifier)
- 把網頁每一個東西都當成積木
- block - 明確描述目的
- 在頁面上獨立存在並可重複使用的元件
- 如同 SMACSS 的 module , layout
- 每一個 block 都是獨立的存在
- 命名規則：
- 明確描述目的 (.logo、.search)
- 不能寫影響環境的樣式 (margin、position)
- 不能寫 id 選擇器
/* 合法 */
.error {
}
/* 不合法，如果突然要改成 orange 不就要改名字 */
.text-red {
}
- element
- 為 block 的子組件
- 無法獨立於 block 之外
- 有 block 可能沒有 element
- 命名規則以 block 名稱再加上兩條底線
__
.button__icon {
}
.text-field__label {
}
.heading__title {
}
.menu__item {
}
- modifier - 後修飾語(說明差異)
- 用來定義 block 或 element 的狀態或屬性
- 類似 SMACSSS 的 state
- 同一個 block 或 element 可以允許多組 modifier 同時存在
.button--active {
}
.text-field--editable {
}
.heading_align-top {
}
.search-form__button--lg {
}
-
命名規則
.namespace-block-name__element-name--modifier
-
使用 BEM 的 CSS 就是 material design