你有以下困擾嗎?
常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?)
還是常常寫了一個Class樣式後就被另一個Class樣式給覆蓋?(我來自首!)
命名了.button-green後,設計師又說不要綠色了,全部改藍色!害你一個一個改命名嗎?(又是我!)
那你更應該跟我一起學一下CSS命名方法論!
昨天算是純CSS的動態正式結束了
(雖然後面兩篇還是有小用JS)
今天額外想要探討一下CSS的命名規則
,
雖然寫到這裡時我的鐵人賽文章幾乎都快寫完了,
然後Demo code也是 XD
但也是警惕一下自己,之後希望都可以照著命名規則去前進。
壞的命名不要!
(同場放歌:嫑Biao)
CSS命名時,其實就是要避免開頭寫到的第三種情況
讓元素的命名不要依賴於位置或是樣式,命名了.button-green後,設計師又說不要綠色了,全部改藍色!害你一個一個改命名嗎?
這邊參考卡斯柏老師的文章),
1.元素避免直接用相對關係命名
避免: .container-item ,也可以用OOCSS的風格拆開:.container .item
2.色彩等樣式避免直接用顏色命名,改以風格命名
避免. .button-green ,改以 .button-active等狀態命名
狀態一定是比樣式更高的一個層級,當要改顏色時,命名就不用動囉!
3.Layout避免用位置命名
避免.left-menu等,可以用OOCSS的風格將位置拆開:
.menu .left 之後還可以重複利用呢!
而該如何更好的命名呢?下面就開始進入正題囉!
常見的命名風格有BEM、OOCSS和SMACSS
從如何去命名(抽象地去重組概念)到命名的風格,
讓CSS選擇去不會有衝突、可以重複利用
,甚至更好地維護
。
其實三種個核心就是把東西給拆解,
分為佈局、元素和樣式等等,讓彼此關係不要互相依賴
,
可以獨立存在。
先快速看一下吧!
風格 | BEM | OOCSS | SMACSS |
---|---|---|---|
優點 | 結構清晰語意化,減少覆蓋class | 減少對HTML的依賴,重複利用Class | 語意化CSS,減少對HTML依賴 |
缺點 | class命名太長 | 結構分類有模糊地帶 | 同左 |
(Block Element Modifier)
最近在國外的前端求職網站比較常看見的BME,也常在codepen上看到,
看命名就知道是以區塊為主(廢話)
是以「區塊__元素 — 樣式(修飾符)」的命名風格,
由區塊、元素與修飾狀態
例如我們有一個header區塊,裡面有button元素,和樣式修飾active和disable
命名就會是:
.header
.header_button—-active
.header_button—-disable
可以搭配SCSS傳送門更有效率地寫程式碼!
.header{
&_button{
border: 1px solid black;
&—-disable{
background: black;
}
}
}
OOCSS(Object-oriented programming)命名就是以物件導向
為中心思想,BootStrap
就是很典型的 OOCSS~可以自由組合出想要的網頁模樣 ,
且避免多寫很多行同樣的 CSS 樣式。
OOCSS比起「BME明確的命名指導」,比較是「CSS風格指引」
BootStrap就有一點BEM + OOCSS的味道在(如果有錯還請指教!)
OOCSS原則:
- 容器與內容 分離(container vs. content)
- 結構與樣式 分離 (structure vs. skin)
原則1
: header 就是容器 ,logo、menu、button 就是內容。
讓內容離開容器也可以正確顯示。
原則2
:讓結構和樣式分離,不會互相依賴。就是把樣式跟結構拆離,
譬如說我有一個button,但在各種使用情境下風格不同(.active / .disable)
所以會把skin拆出來
.button {
width: 200px;
height: 50px;
}
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
這樣的結構與樣式抽離,可以讓開發者透過組合
更好來重複利用、維護與管理,
如果需要改部分樣式時,只要把部分的零件拿掉,不會牽一髮動全身!
Scalable and Modular Architecture for CSS —>可伸縮模塊化的CSS架構
主要分成5大類:
1.基礎(Base) default style, 不需要前綴
2.佈局(Layout),將頁面切割的部分前綴為 l-
或 layout-
,如l-table
、layout-grid
3.模塊(Module)-可重複利用的對象,前綴為 m-
或本身名稱,如m-nav
4.狀態(State)-如隱藏、active等等,前綴為 is-
,如is-active
5.主題(theme)-如明亮、暗模式,前綴為 theme-
,如theme-dark
我覺得SMACSS跟OOCSS的概念滿像的。(一樣有錯請多指教!)
佈局和模塊對應容器與內容
分離
模塊和狀態對應結構與樣式
分離
都是為了減少對彼此的依賴。
當我自己在寫code時最近常用的是BEM,
也因為寫的時候通常都只有一頁,內容少,
讓我可以快速知道元素的上下關係和脈絡。
之前團隊在協作時,我們是採用OOCSS的做法,(類似啦!)
很多樣式如.flex .button-active 等等,
都可以讓團隊成員快速上手、重複利用。
今天整理完這篇,之後也會更好好想命名!
有任何錯誤或是想法歡迎留言告訴菜逼把我!
感恩~
CSS 模块化方案探讨(BEM、OOCSS、CSS Modules、CSS-in-JS ...)
CSS规范BEM CSS和OOCSS
Exploring SMACSS: Scalable and Modular Architecture for CSS
如何使用Sass和SMACSS维护CSS
OOCSS Methodology
值得参考的css理论:OOCSS、SMACSS与BEM