最近在The Sass Way里看到了Modular CSS typography一文,發現文章在開頭部分就提到了OOCSS、SMACSS、BEM、這3個詞。“如果還不知道這些是什么,請先不要繼續看下去”,聯想到作者這樣友好(gāo lěng)的提醒,作為圍觀群眾,自然要有所回應。所以,本文在這里分別介紹它們。
OOCSS、SMACSS及BEM都是有關css的方法論(準確地說,其中BEM應該是一個完整的前端開發理論,不僅限于css),可作為實現優秀css架構(css architecture)的指南。
css易于理解,但應用和維護并不簡單。在各種開發情景下,css都可能成為一個問題點。因此,我們編寫和組織css應認真、用心。
OOCSS
OOCSS(Object Oriented CSS),字面意思是面向對象的CSS,是由Nicole Sullivan提出的css理論,其主要的兩個原則是:
Separate structure and skin(分離結構和主題)
Separate container and content(分離容器和內容)
用一個例子來說明。請看下面這樣的圖文排列:
新聞熱點
疑難解答