iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 11

#番外-讓你的CSS好讀起來!CSS命名方法論筆記

  • 分享至 

  • xImage
  •  

你有以下困擾嗎?

常常不知道要怎麼命名Class嗎?(還一直去 Google 英文字的是你ㄇ ?)
還是常常寫了一個Class樣式後就被另一個Class樣式給覆蓋?(我來自首!)
命名了.button-green後,設計師又說不要綠色了,全部改藍色!害你一個一個改命名嗎?(又是我!)

那你更應該跟我一起學一下CSS命名方法論!

昨天算是純CSS的動態正式結束了
(雖然後面兩篇還是有小用JS)
今天額外想要探討一下CSS的命名規則
雖然寫到這裡時我的鐵人賽文章幾乎都快寫完了,
然後Demo code也是 XD

但也是警惕一下自己,之後希望都可以照著命名規則去前進。


CSS命名的不要!

壞的命名不要!/images/emoticon/emoticon05.gif
(同場放歌:嫑Biao

CSS命名時,其實就是要避免開頭寫到的第三種情況

讓元素的命名不要依賴於位置或是樣式,
命名了.button-green後,設計師又說不要綠色了,全部改藍色!害你一個一個改命名嗎?
這邊參考卡斯柏老師的文章),

1.元素避免直接用相對關係命名
避免: .container-item ,也可以用OOCSS的風格拆開:.container .item

2.色彩等樣式避免直接用顏色命名,改以風格命名
避免. .button-green ,改以 .button-active等狀態命名
狀態一定是比樣式更高的一個層級,當要改顏色時,命名就不用動囉!

3.Layout避免用位置命名
避免.left-menu等,可以用OOCSS的風格將位置拆開:
.menu .left 之後還可以重複利用呢!

而該如何更好的命名呢?下面就開始進入正題囉!


常見的3種命名風格

常見的命名風格有BEM、OOCSS和SMACSS
從如何去命名(抽象地去重組概念)到命名的風格,
讓CSS選擇去不會有衝突、可以重複利用,甚至更好地維護
其實三種個核心就是把東西給拆解,
分為佈局、元素和樣式等等,讓彼此關係不要互相依賴
可以獨立存在。
先快速看一下吧!

風格 BEM OOCSS SMACSS
優點 結構清晰語意化,減少覆蓋class 減少對HTML的依賴,重複利用Class 語意化CSS,減少對HTML依賴
缺點 class命名太長 結構分類有模糊地帶 同左

風格1: BEM 名稱最短最好記

(Block Element Modifier)
最近在國外的前端求職網站比較常看見的BME,也常在codepen上看到,
看命名就知道是以區塊為主(廢話

是以「區塊__元素 — 樣式(修飾符)」的命名風格,

由區塊、元素與修飾狀態

  • Block是頁面獨立的區塊,每個頁面都可以看成很多區塊的組合。
  • Element是指區塊中的元素
  • Modifier 是指描述Block或者Element的屬性或狀態

例如我們有一個header區塊,裡面有button元素,和樣式修飾active和disable

命名就會是:

.header

.header_button—-active

.header_button—-disable

可以搭配SCSS傳送門更有效率地寫程式碼!

.header{
	
	&_button{
	border: 1px solid black;

		&—-disable{
			background: black;
			}

	}

}

風格2: OOCSS:物件導向的CSS

OOCSS(Object-oriented programming)命名就是以物件導向為中心思想,
BootStrap就是很典型的 OOCSS~可以自由組合出想要的網頁模樣 ,
且避免多寫很多行同樣的 CSS 樣式。

OOCSS比起「BME明確的命名指導」,比較是「CSS風格指引」
BootStrap就有一點BEM + OOCSS的味道在(如果有錯還請指教!)

OOCSS原則:

  1. 容器與內容 分離(container vs. content)
  2. 結構與樣式 分離 (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;
}

這樣的結構與樣式抽離,可以讓開發者透過組合更好來重複利用、維護與管理,
如果需要改部分樣式時,只要把部分的零件拿掉,不會牽一髮動全身!


風格3: SMACSS 伸縮自如的CSS架構!

Scalable and Modular Architecture for CSS —>可伸縮模塊化的CSS架構

主要分成5大類:

1.基礎(Base) default style, 不需要前綴
2.佈局(Layout),將頁面切割的部分前綴為 l-layout-,如l-tablelayout-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


上一篇
#8-選單華麗開起來!超簡單!(animation-delay)
下一篇
#9-數字動態好棒棒!(Vanilla JS requestAnimationFrame)
系列文
這個網站也太嗨!30 個網頁動態提案33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言