Philip Walton 在AppFolio擔任前端工程師，他在Santa Barbara on Rails的聚會上提出了CSS架構和一些最佳實踐，并且在工作中一直沿用。

　　擅長CSS的Web開發人員不僅可以從視覺上復制實物原型，還可以用代碼進行完美的呈現。無需使用表格、盡可能少的使用圖片。如果你是個名副其實的高手，你可以快速把最新和最偉大的技術應用到你的項目中，比如媒體查詢、過渡、濾鏡、轉換等。雖然這些都是一個真正的CSS高手所具備的，但CSS很少被人單獨拿出來討論，或者用它去評估某個人的技能。

　　有趣的是，我們很少這樣去評價其他語言。Rails開發人員并不會因為其代碼比較規范，就認為他是一名優秀的開發人員。這僅僅是個基準。當然，他的代碼得必須規范。另外，還需集合其他方面考慮，比如代碼是否可讀？是否容易修改或擴展……

　　這都是些很自然的問題，CSS和它們并沒有什么不同之處。今天的Web應用程序要比以往更加龐大。一個缺乏深思熟慮的CSS架構往往會削弱發展，是時候像評估其他語言那樣，來評估一下CSS架構了，這些都不應該放在“事后”考慮或者單單屬于設計師們的事情。
1.良好的CSS架構目標

　　在CSS社區，很難提出某個最佳實踐已經成為大家的普遍共識。純粹地從Hacker News的評論上判斷和開發者們對CSS Lint發布后的反應來看，大多數人對基本的CSS東西是持反對意見的。所以，并不是為自己的最佳實踐奠定一套基本的論據，而應該確定真正的目標。

　　好的CSS架構目標并不同于開發一個好的應用程序，它必須是可預測、可重用、可維護和可伸縮的。

　　可預測

　　可預測意味著可以像預期的那樣規范自己的行為。當你添加或者修改某個規則時，它并不會影響到沒有指定的部分。對于一個小網站來說，一些微乎其微的改變并不算什么。而對于擁有成千上萬個頁面的大網站來說，可預測卻是必須的。

　　可重用

　　CSS規則應具備抽象和解耦性，這樣你就可以在現有的基礎上快速構建新的組件，無需重新修改編碼模式。

　　可維護

　　當把新組件放置到網站上，并且執行添加、修改或者重新設計操作時，無需重構現有CSS，并且新添加的X并不會打破原有頁面的Y組件。

　　可擴展

　　當網站發展到一定規模后，都需要進行維護和擴展。可擴展的CSS意味著網站的CSS架構可以由個人或者團隊輕易地管理，無需花費太多的學習成本。

　　2.常見的錯誤實踐

　　在實現良好的CSS架構目標之前，我們來看一些常見的錯誤做法，這對我們達成目標是有好處的。

　　下面的這些例子雖然都可以很好的執行，但卻會給你帶來很多煩惱，盡管我們的意圖和愿望都是美好的，但是這些開發模式會讓你頭疼。

　　幾乎在每個網站上，都會有一個特定的虛擬元素看起來與其他頁面是完全一樣的，然而只有一個頁面除外。當面對這樣一種情況時，幾乎每個新手CSS開發人員（甚至是經驗豐富的）都會以同樣的方式來修改。你應該為該頁面找出些與眾不同之處（或者自己創建），然后再寫一個新規則去操作。

　　基于父組件來修改組件
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表