CSS哲學僞命題

標題黨。這篇文章斷斷續續的修改過好幾回，也沒有滿意，原本是想總結一下我這些零散的 CSS 知識結構，可能因爲知識體系不全面，老是沒能把知識點串聯成一個通順的內容。貼出來權當你們一塊兒討論下「前世此生」。文章後續可能會不定時更新。

CSS 做爲 Web 的基礎部分，極其容易上手。可是 CSS 並不算的上是一門編程語言，在語言能力上略顯薄弱，每每致使總體的維護性變差。可是這並無使得你們中止對 CSS 的探索，從命名規範，目錄架構，預處理器(如SASS)，後處理器（PostCSS），模塊化等等的方向上，努力把 CSS 變得更好。

關於自我歷程

其實我本身並無系統的學習過 CSS（雖然我如今也不知道如何系統的學習），看了幾個視頻，掃了下中文版的 API，而後就開始了切圖生涯，不少的知識點也都是後來一些零散的博客中瞭解到的。這過程當中，的的確確踩過很多的坑，有的填了，有的繼續禍害着項目裏其它的同窗。也致使我在很長的時段時間裏都是走在一個混亂無序的 CSS 書寫當中。

最先遇到的大概的是命名的問題了吧，由於自己積累的詞彙量就少，動不動就沒單詞可用了。那個時候好像也就是網上列出一大堆像menu， siderbar之類的「命名大全」來模仿。再到後來接觸到了 Bootstrap 這種比較系統的框架（裏面有好多能夠值得借鑑的地方），然後又看到一些按類別劃分文件，再配有特有的前綴的管理方式(那個時候還並不知道 SMACSS 的名詞)，還有一些原子化，把功能和樣式分離等等的。在 SASS 興起的時候其實挺興奮的，由於終於感受有了點編程的能力，固然了，對變量，嵌套，mixins等等的使用，很大程度上提升了編程效率。在後來同事的分享中，又瞭解了 BEM 的命名方式（初看很亂，瞭解後有一種豁然開然的感受，細細回想起來，也就是你們約定一套共用的命名規範）。以及經過 PostCSS 去實現 CSS 中一些自動處理的任務。在 React/ES6/Webpack 出現後，使得很大一部分程度上，CSS 寫在 JS 中的方式也開始在特定的場合中頻頻出現。

以上，統統出現過個人項目中，在項目切換維護的時候，那感受，心如刀割。並非說上面涉及到的知識點有對錯的問題，只是在一個團隊中，若是沒有一些統一的架構和約定，每每到項目的後期會變得愈來愈不穩定。這不由又讓我想起了 CSS 的學習曲線（像PHP？又來黑了），樣式你們都能寫，能愉快的維護，又是另外一個層次了。

我的以爲 CSS 中有兩個比較重要的點，語義化和可維護性，而最終都是爲了提升開發的效率。

語義化很大一部分程度上是爲了閱讀須要，簡易明瞭。建議團隊內仍是要儘可能的保持風格一致。其它的，能夠看一下CSS語義思惟的內容，這裏不展開講了。

可維護性真的是一個很虛的概念，可是涉及到了多方面的各個點。好比，該怎麼保持項目的簡單性，靈活性，而同時又有足夠的擴展能力？又好比如何抽取模塊，是以功能劃分仍是以樣式結構？如何重用樣式？如何防止樣式被覆蓋，避免冗餘代碼等等。

除了一次性的單頁面這種外，通常項目類型的，都建議在開始的時候就搭好底層，統一一下總體風格與使用習慣，保持良好組織結構，命名規範，否則越日後面，可能會遇到更大的問題。

好比，對文件作一個層次劃分

• 基礎框架（reset，iconfont，柵格）

• 通用模塊（原子，統一規範的模塊）

• 頁面樣式（繼承通用模塊）

採用相似 BEM/SUIT 等等的命名方式等等。

現有的技術選擇

其實咱們在平時應該或多或少的接觸過一些 SASS, Compass, BEM, SMACSS, OOCSS 的概念與設計模式。固然並無一種解決方案是絕對的，合適當前的項目就能夠了。

BEM

用於解決項目命名規則問題。BEM 經過已block(塊)，element(元素)，modifier(修飾符) 的概念，使用鏈接符串聯父級塊做爲前綴，來實現功能模塊命名的惟一性。有興趣的同窗能夠看一下 BEM的進化史。發現一句話並不太好表述清楚，想要具體瞭解的同窗能夠移步官網。

BEM 這種惟一性以及元素間的平級展開，每每在稍微複雜一點的項目裏，就會把名字命名的很長很長。目前也有不少是在 BEM 的基礎上衍生出來的一些方式(如 SUIT)。

OOCSS （Object Oriented CSS）

面向對象 CSS。是一種已面向對象的維護方式去管理組織 CSS 代碼。其哲學理念是模塊化，功能單一性，關注點分離。

OOCSS 中有兩個重要的原則

• 結構和外觀分離。樣式儘可能獨立，和 DOM 無關

• 容器和內容分離。CSS 只關注內容

OOCSS 與 SASS 結合是一個不錯的選擇，充分強大。

SMACSS(Scalable and Modular Architecture for CSS)

可擴展和模塊化 CSS。
把 CSS 樣式劃分爲若干個不一樣類別的文件，如基礎，佈局，模塊，主題等等。在加上一些特有前綴的組合。

ACSS (Atomic CSS)

原子化 CSS。遵循關注點分離原則。

CSS 模塊化

隨着 React 的迅速引爆，其它關於 CSS 的另外一種使用方式也在興起。將樣式在 JS 中定義。藉助 require/import 而解決了 CSS 中的命名空間的問題，使得單文件變得簡單清晰。而經過組合，也能夠實現快速的重複利用。甚至有些 CSS 能夠單獨與組件去綁定。

以及其它的一些方式。上述的方式，是比較讓我眼前一亮的感受。

將來走向

待補充...

擴展閱讀

• CSS模塊(中文翻譯版)

• CSS 規範和最佳實踐

• BEM 進化史

• 如何理解 CSS 類名語義化

• CSS 分層