&emsp;&emsp;方法論是一個哲學術語，會對一系列具體的方法進行分析研究、系統總結并最終提出較為一般性的原則。CSS方法論是一種面向CSS、由個人和組織設計、已被諸多項目檢驗且公認有效的最佳實踐。這些方法論都會涉及結構化的命名約定，并且在組織CSS時可提供相應的指南，從而提升代碼的性能、可讀性以及可維護性。本章會講解三種CSS方法論：OOCSS、BEM和SMACSS。 ## 一、OOCSS &emsp;&emsp;[OOCSS](http://oocss.org/)（Object-Oriented CSS）是指面向對象的CSS，由Nicole Sullivan在2009年提出，借鑒了面向對象編程的抽象思維。其核心概念是采用模塊化的實現方式，將CSS分解成可復用和繼承的對象，也就是將關注點從頁面轉移到頁面內的組件。OOCSS包含兩條核心原則，如下所列，每條原則下都給出了相應的示例。 &emsp;&emsp;（1）結構與皮膚分離，即不要將位置、尺寸等結構屬性和字體、顏色等皮膚屬性寫在一個選擇器中。 ~~~html <style> .col { float: left; width: 200px; } .line { background: #F60; } </style> <div class="line col"></div> ~~~ &emsp;&emsp;（2）內容與容器分離，即讓對象的行為可預測，避免對位置的依賴，子元素即使離開了容器也應該能正確顯示。 ~~~html <style> .line { background: #F60; } .unit { width: 50%; } </style> <div class="line"> <div class="unit"></div> </div> ~~~ **1）命名約定** &emsp;&emsp;在OOCSS中，類名既要能傳遞對象的用途，也要有通用性，例如mod、complex、pop等。如果將CSS類命名的太語義化，例如navigation-bar，那么就會將其限制在導航欄，無法應用到網頁的其它位置。 **2）缺點** &emsp;&emsp;OOCSS的缺點也很明顯，如下所列。 &emsp;&emsp;（1）雖然樣式的粒度變小了，但同時會產生許多充滿類的HTML元素。 &emsp;&emsp;（2）在避免特殊性沖突時，OOCSS選擇的方案是放棄層疊，這樣就無法最大程度地利用關系選擇器的優勢。 &emsp;&emsp;（3）為了讓類能更通用，在命名時就得弱化語義。 ## 二、BEM &emsp;&emsp;[BEM](http://getbem.com/)（Block Element Modifier）是指塊級元素修飾符，也是在2009年提出，起源于Yandex（俄語版的Google）。BEM分為三部分： &emsp;&emsp;（1）塊（Block）是一個獨立實體，最高級抽象，相當于OOCSS中的對象，例如菜單、文本框等。 &emsp;&emsp;（2）元素（Element）是塊的組成部分，被包含在塊中，無法自成一體，例如菜單項、標題等。 &emsp;&emsp;（3）修飾符（Modifier）是塊或元素的狀態，可更改它們的外觀或行為，例如高亮、選中等。 **1）命名約定** &emsp;&emsp;BEM中的塊、元素和修飾符需要全部小寫，名稱中的單詞用連字符（-）分隔，元素由雙下劃線（\_\_）分隔，修飾符由雙連字符（--）分隔。注意，塊和元素都既不能是HTML元素名或ID，也不依賴其它塊或元素。 &emsp;&emsp;在下面的示例中，.form是塊，.form\_\_input和.form\_\_submit是其元素，.form--theme-xmas是其修飾符，而.form\_\_submit--disabled是.form\_\_submit的修飾符。 ~~~html <style> .form {} .form--theme-xmas {} .form__input {} .form__submit {} .form__submit--disabled {} </style> <form class="form form--theme-xmas"> <input class="form__input" type="text" /> <input class="form__submit form__submit--disabled" type="submit" /> </form> ~~~ &emsp;&emsp;BEM的核心思想就是用這種命名約定來清晰的表達出類的含義以及與其它類之間的關系。 **2）缺點** &emsp;&emsp;BEM的缺點如下所列。 &emsp;&emsp;（1）BEM與OOCSS一樣，也拋棄了層疊，因此也不能完全挖掘出關系選擇器的潛力。 &emsp;&emsp;（2）CSS類名可能會比較長而且復雜。 &emsp;&emsp;（3）需要完善規則說明文檔，否則HTML結構將難以閱讀。 ## 三、SMACSS &emsp;&emsp;[SMACSS](http://smacss.com/)（Scalable and Modular Architecture for CSS）是指可伸縮及模塊化的CSS架構，由Jonathan Snook在2011年雅虎工作時提出。他在OOCSS和BEM的基礎上添加了五種類別的組件的處理規則，具體如下所列。 &emsp;&emsp;（1）基礎（Base）是為HTML元素定義默認樣式，可以包含屬性、偽類等選擇器。 &emsp;&emsp;（2）布局（Layout）會將頁面分為幾部分，可作為高級容器包含一個或多個模塊，例如左右分欄、柵格系統等。 &emsp;&emsp;（3）模塊（Module）又名對象或塊，是可重用的模塊化部分，例如導航欄、產品列表等。 &emsp;&emsp;（4）狀態（State）描述的是任一模塊或布局在特定狀態下的外觀，例如隱藏、激活等。 &emsp;&emsp;（5）主題（Theme）也就是換膚，描述了頁面的外觀，它可修改前面四個類別的樣式，例如鏈接顏色、布局方式等。 **1）命名約定** &emsp;&emsp;推薦使用前綴來區分布局、模塊、狀態和主題，如下所列。 &emsp;&emsp;（1）“l-”或“layout-”用作布局的前綴，例如.l-inline、.layout-grid等。 &emsp;&emsp;（2）“m-”或模塊自身的命名用作其前綴，例如.m-profile、.field等。 &emsp;&emsp;（3）“is-”用作狀態的前綴，例如.is-collapsed、.is-active等。 &emsp;&emsp;（4）“theme-”用作主題的前綴，例如.theme-a-background、.theme-l-grid等。 &emsp;&emsp;注意，由于基礎規則是直接作用于元素的，因此不需要前綴。 **2）共享** &emsp;&emsp;在實際工作中，不需要局限于某一個CSS方法論，很多時候可以結合使用，共享模塊化CSS的規則。例如遵循OOCSS的第一條分離原則，BEM的命名約定，以及SMACSS的分類前綴，具體如下所列。 &emsp;&emsp;（1）基礎仍舊沿用SMACSS的規則，布局和模塊使用SMACSS的前綴。 &emsp;&emsp;（2）子元素用雙下劃線（\_\_）分隔，其狀態前綴沿用“is-”。 &emsp;&emsp;（3）修飾符也以“is-”為前綴，與模塊組合時用雙連字符（--）分隔。 &emsp;&emsp;（4）適當層疊，最好保持在一層。 &emsp;&emsp;在下面的示例中，.m-notice\_\_img和.m-notice\_\_content是模塊的子元素，.is-important是子元素h6的狀態，.m-notice--is-active是模塊的修飾符。 ~~~html <style> .l-notice {} .m-notice {} .m-notice--is-active {} .m-notice__img {} .m-notice__content h6 {} .is-important {} </style> <div class="m-notice l-notice"> <img class="m-notice__img" /> <div class="m-notice__content"> <h6>......</h6> <h6 class="is-important">......</h6> </div> </div> ~~~ ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。