資訊專欄INFORMATION COLUMN
摘要：最早遇到的大概的是命名的問題了吧，因為本身積累的詞匯量就少，動不動就沒單詞可用了。用于解決項目命名規則問題。其哲學理念是模塊化，功能單一性，關注點分離。借助而解決了中的命名空間的問題，使得單文件變得簡單清晰。
標題黨。這篇文章斷斷續續的修改過好幾次，也沒有滿意，本來是想總結一下我這些零散的 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 樣式劃分為若干個不同類別的文件，如基礎，布局，模塊，主題等等。在加上一些特有前綴的組合。
原子化 CSS。遵循關注點分離原則。
CSS 模塊化隨著 React 的迅速引爆，其它關于 CSS 的另一種使用方式也在興起。將樣式在 JS 中定義。借助 require/import 而解決了 CSS 中的命名空間的問題，使得單文件變得簡單清晰。而通過組合，也可以實現快速的重復利用。甚至有些 CSS 可以多帶帶與組件去綁定。
以及其它的一些方式。上述的方式，是比較讓我眼前一亮的感覺。
未來走向待補充...
擴展閱讀CSS模塊(中文翻譯版)
CSS 規范和最佳實踐
BEM 進化史
如何理解 CSS 類名語義化
CSS 分層
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115073.html
摘要：面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師 更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...
摘要：每逢提及物聯網，后頭必然跟著區塊鏈提到區塊鏈，也必須將物聯網帶入話題。而最嚴重的，則是物聯網的安全問題。物聯網領域的網絡攻擊頻繁已成現實，就是去年最令人難忘的一個物聯網僵尸網絡。 showImg(https://segmentfault.com/img/bV8pXD?w=2480&h=1274); 不知從什么時候開始，物聯網與區塊鏈深深地扯上了關系，并且在今年有愈演愈烈之勢。每逢提及物...
摘要：事實上，云計算本質上就是開源的，尤其對于阿里云所專注的公有云服務領域更是如此。從用戶思維來看世界上根本沒那么多云在筆者看來，不管是自主可控還是開源，抑或是其他形式標榜自身的云計算，其實都是從自身角度出發的自說自話。兩個多月前，阿里云的一句：中國只有兩種云，一種是拿來主義的云，一種是自主可控的飛天云。引發了業界的廣泛吐槽，不過很多人嘴上雖然不服氣，可心里也沒脾氣?。赫l讓阿里云是中國公有云市場的...
摘要：確保一次性上線成功。而對于高難度的需咨詢解決的問題，則應盡量避免納入交付范圍。需求，管理策略問題采購權分散，造成采購源混亂且采購成本虛高。需求，基礎數據問題沒有統一的物資編碼規則，一物多碼現象嚴重。編者按：本文作者王戴明是具有12年信息化咨詢與管理經驗的行業老兵，他通過對行業的觀察以及與曾經客戶的交流發現，即便近幾年SaaS的概念炒得火熱，但客戶本身和客戶的需求其實一直都沒有發生太大的變化。...
摘要：常用于鏈接描點上用戶行為選擇器選擇匹配的元素，且匹配元素被激活。，選擇的是奇數項，而使用選擇的卻是偶數項否定偽類選擇器選擇器功能描述匹配所有除元素外的元素屬性選擇器語法選擇器功能描述用于選取帶有指定屬性的元素。 CSS選擇器概述 一.CSS3 選擇器分類 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.選擇器語法...
閱讀 1428·2021-11-22 15:24
閱讀 2519·2021-10-11 11:06
閱讀 2323·2021-10-09 09:45
閱讀 2525·2021-09-09 09:33
閱讀 634·2019-08-30 15:53
閱讀 1439·2019-08-30 12:48
閱讀 656·2019-08-29 13:47
閱讀 499·2019-08-26 18:27
