什麼樣的CSS 代碼算是優雅的、高效的？如何寫出這樣的 CSS？

01-15

何不通讀業界成功項目的代碼如：bootstrap，你要的答案已經融匯在每行代碼和每句注釋里，就看你願不願意花時間挖掘學習了。CSS的代碼不會艱深複雜，相反其實很精粹直觀，重要的是思考為什麼每處代碼和每個注釋要這樣去處理，而不是用別的方法，當你體會了那些內在的道理，知識和理念的水平就不知不覺提升了。

我的經驗是：一行一行老老實實讀，不要跳著讀，不要期待立刻有大發現，去發現那些細節，然後用時間去發現宏觀的架構的理念。

如果覺得代碼還不夠，用Google可以搜出一堆CSS的最佳實踐的文章，但它們還是需要你花時間一行一行地讀完，不可能讓你有大力丸那樣的技能躍進。

70 Expert Ideas For Better CSS Coding

http://www.innofied.com/25-css-best-practices-we-follow-at-innofied/

Writing efficient CSS

http://1stwebdesigner.com/css-best-practices/

Writing Good CSS

用Google。(
https://www.linkev.com/?a_aid=itlr )

使用預處理語言，PostCSS，CSScomb 等工具來實現高效

使用成熟的框架[1]，架構模式[2]來實現優雅

使用風格指南[3]，Linter 來實現更優雅，更高效

References

1. CSS Front-end Frameworks with comparison

2. Home - Scalable and Modular Architecture for CSS

3. standard/css-style-guide.md at master · teambition/standard · GitHub

瀉藥。一個公司有一個公司的標準，不好一概而論。對我司來說，我對整個團隊的css規劃主要在：

1、css按照公有和私有模塊化開發；

2、css命名的統一規範；

3、根據UED標準開發通用的組件樣式模塊（包含統一的pc和移動端reset）；

4、結構統一標準且語義化的html結構輸出。

關於這個話題，我一直想寫篇文章，但一直苦於找不到合適的切入點，總怕掛一漏萬。終於某一天，有人幫我做了這件事情，而我也將它親手翻譯了出來，也算了卻了一樁心事。

所以，我所能給出的最佳回答將是《CSS 揭秘》一書中的這一節：《CSS 編碼技巧》。

推薦一本書《高流量網站css》

LESS

優雅，高效沒有標準，就是使用最少的代碼實現效果，讀讀jQ的理念。

沒事抄抄bootstrap你會慢慢懂的。

至於less，你要合理使用，像我這樣取了太多類名就出現這種情況，

排列組合太多，強迫症看起來很難受，以後注意要規範使用。。。。