Chiou Chu's Blog: CSS開發規範筆記

最近看到有人在討論CSS的設計模式和開發的原則
像是BEM、OOCSS、SMACSS等
記錄閱讀一些文章的筆記

BEM

是一種class的命名技巧，可以避免命名重複，區分HTML架構
B-Block，以Block區塊作為命名prefix，通常是網站上的大區塊
E-Element，Block下的子元素，通常用__兩個底線區隔
M-Modifier，用來描述區塊/子元素的狀態，通常用--兩個dash區隔

.block{}
.block__element{}
.block--modifier{}
.block__element--modifier{}

*單一個-dash表示不依賴任何Block或Element，獨立存在
EX: .page-wrapper

保哥的CSS筆記總整理也非常值得一讀
https://github.com/doggy8088/CSS-Guidelines

OOCSS

是寫CSS的一種概念-物件導向CSS，最主要的重點：

* 減少對HTML結構的依賴 (盡量減少CSS太多層設定)
* 增加CSS Class的重複使用性 (把重複設計的部分，放到抽象的class)

SMACSS

Scalable and Modular Architecture for CSS
大家都推薦閱讀Jonathan Snook-SMACSS

最主要劃分規則

* Base

就是標籤元素的預設值，像是reset.css/normalize.css等
只會對標籤元素做設定，不會出現任何class或id，但可以有:hover等(屬性選擇器或偽類)

* Layout

用來定義網頁上的主要區塊/大架構，比如說header、main、sidebar、footer
如果有RWD，通常規則也會寫在這層

* Module

所謂的模組，就是可以重複使用的，所以都會用Class
比如說 .button

看到一篇文章特別區分出 Partial
定義特定區塊下的設定，比如說header下的子元素 (不屬於Layout也不同於Module)
http://blog.chh.tw/posts/oocss-smacss-and-css-guidelines/

* State

這裡定義模組的狀態，比如說.current、.hidden
(.current 像menu目前在哪個單元的狀態設定)

* Theme

風格主題設定，比如說color、font-size、border等，主要是大方向的樣式定義

JS hooks

大部分都建議不要把CSS class名稱當成JS hooks來用，為了避免改CSS class樣式後也要調整JS，所以會把CSS class和jQuery選取器用的class區分，通常會加上.js-，不過~讓我有點不習慣的地方是，通常class會用兩個空白字元來間隔，這樣可以增加易讀性，但就是要改改習慣了! XD

<div class="nav__item  js-nav__item">
</div>

其他

* 避免過度修飾的選取器
ul.nav li a{} -> .nav a{}

* 思考使用選取器的目的
.header ul{}
你的選取器必須符合你要給這個元素新增樣式的原因，思考一下，「我定位到這個元素，是因為它是 .header 下的 ul，還是因為它是我網站的主選單？」這將決定你應該如何使用選取器。

* 魔數與絕對定位
https://github.com/doggy8088/CSS-Guidelines#%E9%AD%94%E6%95%B8%E8%88%87%E7%B5%95%E5%B0%8D%E5%AE%9A%E4%BD%8D

參考文章

http://blog.chh.tw/posts/oocss-smacss-and-css-guidelines/
http://www.sitepoint.com/css-sass-styleguide/
http://www.w3cplus.com/preprocessor/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss.html
http://www.integralist.co.uk/posts/maintainable-css-with-bem/

2014年3月12日 星期三

CSS開發規範筆記

BEM