CSS框架開發指南

　　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開發人員(甚至是經驗豐富的)都會以同樣的方式來修改。你應該為該頁面找出些與眾不同之處(或者自己創建)，然後再寫一個新規則去操作。

　　基於父組件來修改組件

　　CSS Code復制內容到剪貼板

　　.widget {

　　background: yellow;

　　border: 1px solid black;

　　color: black;

　　width: 50%;

　　}

　　#sidebar .widget {

　　width: 200px;

　　}

　　body.homepage .widget {

　　background: white;

　　}

　　初看，這絕對是段無害的代碼，但讓我們來看看它是否達到了我們所設置的目標。

　　首先，widget在examle是不可預見的。當這些小部件出現在頁面兩側或者主頁面時，開發人員期望它們以某種特定的方式顯示出來，且又不失特色。另外，它也是不可重用或不可擴展的。

　　另外，它也比較難維護。一旦這個widget需要重新設計，那麼你不得不修改其他幾個CSS樣式。想象一下，如果這段代碼是使用其他語言編寫的，它基本就是一個類定義，然後在代碼的另一部分使用該類定義並做出擴展。這直接違反了軟件開發的開放/閉合(open/close)原則。

　　軟件實體(類，模塊，函數等)應對擴展開放，對修改閉合。

　　過於復雜的選擇器

　　偶爾，會有些文章介紹CSS選擇器對整個網站的展示起著非常重要的作用，並且宣稱無需使用任何類選擇器或者ID選擇器。

　　但伴隨著越深入的開發，我越會遠離這種復雜的選擇器。一個選擇器越復雜，與HTML就越耦合。依靠HTML標簽和組合器可以保持HTML代碼干干淨淨，但卻讓CSS更加毛重和凌亂。

　　CSS Code復制內容到剪貼板

　　#main-nav ul li ul li div { }

　　#content article h1:first-child { }

　　#sidebar > div > h3 + p { }

　　對上面代碼進行簡單的理解。第一個可能是對下拉菜單進行樣式化;第二個想說明文章的主標題應該與其他頁面的H1元素不同;最後一個表示在第一段的側邊欄區域添加一些額外的空間。

　　如果這個HTML是永遠不變的，那就無可說之處，但這根本毫不現實。過於復雜的選擇器會讓人印象深刻，它可以讓HTML擺脫掉表面上的復雜，但對於實現良好的CSS架構目標卻毫無用處。

　　上面提到的例子都是不具備可預測性、可重用、可擴展和可維護這四大特性的。例如第一個選擇器(下來菜單)例子，如果一個外觀非常相似的下拉列表需要用在不同的頁面上，並且#main-nav並不屬於內部元素，那麼你是否需要重新設計?假設開發者想要修改第三個例子裡div裡面部分標記，那麼整個規則都會被打破。

　　過於通用的類名

　　當創建可重用的設計組件時，在組件的類選擇器中覆蓋附件的子元素是很常見的現象。例如：

　　CSS Code復制內容到剪貼板

　　

 

　　

...

 

　　

 

　　Lorem ipsum dolor sit amet, consectetur adipiscing elit.

　　In condimentum justo et est dapibus sit amet euismod ligula ornare.

　　Vivamus elementum accumsan dignissim.

　　Click Me!

　　

 

　　

 

　　.widget {}

　　.widget .title {}

　　.widget .contents {}

　　.widget .action {}

　　像.title、.contents、.action這些子元素類選擇器可以被安全地進行樣式命名，無需擔心這些樣式會蔓延到擁有相同類名的其他元素中。這是千真萬確的。但它並沒有阻止相同樣式類名稱會蔓延到這個組件上。

　　在一些大型項目上，像.title這樣的名稱很有可能會被用在另外一個頁面或者本身。如果這樣的情況發生，那麼整個標題部分明顯會和預期的不一樣。

　　過於通用的類選擇器名稱會導致許多不可預測的CSS樣式發生。

　　一個規則做太多事

　　有時，你要在網站的左上角區域做一個20pixels的可視化組件。

　　CSS Code復制內容到剪貼板

　　.widget {

　　position: absolute;

　　top: 20px;

　　left: 20px;

　　background-color: red;

　　font-size: 1.5em;

　　text-transform: uppercase;

　　}

　　下面，你需要在網站的其他區域使用該組件，那麼上面的這個代碼明顯是錯誤的，不可重用的。

　　問題的關鍵是你讓.widget這個選擇器做的事情太多，不僅對該組件的位置進行了規定，還對它的外觀和感覺方面進行了樣式。外觀和感覺可以通用，而位置是不可以的。有時候，把它們整合起來使用反而會大打折扣。

　　雖然這些看起來並無害處，對一些缺乏經驗的CSS程序員來說，復制和粘貼已經成為一種習慣。如果一個新團隊需要一個特定組件，比如.infobox，他們會嘗試使用這個類選擇器。但如果該信息框沒有按照期望的那樣，在每個需要的地方正確顯示出來。這時，你認為他們會怎麼做?以我的經驗來看，他們會打破可重用這一規則，相反，他們會簡單地把這些代碼復制粘貼到每個需要的地方。做些不必要的重復工作。

　　3.原因

　　上面列舉的這些常規錯誤實踐都有一個相似性，CSS樣式承擔過多。

　　對這樣的說法你會感到奇怪，畢竟，它是一個樣式表，難道不應該承擔大多數(如果不是全部)的樣式嗎?那不正是我們想要的嗎?

　　的確。但是通常來講，事情並沒有那麼簡單。內容與表現(presentation)相分離是件好事，但CSS從HTML中獨立出來並不意味著內容也需要從表現中分離。換句話說，如果CSS請求深入分析HTML架構，那麼從HTML中分拆所有的顯示代碼並不一定會實現所有的目標。

　　此外，HTML很少會只包含內容，也表示整體框架。通常，架構是會包含container元素，允許CSS隔離一些固定元素。即使沒有表象類(presentational classes)，也能混合HTML清晰地把內容展示出來。

　　我相信，鑒於當前的HTML和CSS狀態，把HTML和CSS明智地結合起來，當做表現層是非常需要的。而通過模板和局部模板(partials)也可以把內容層進行分離。

　　4.解決方案。

　　如果把HTML和CSS結合起來，作為一個Web應用程序的表現層，那麼它們需要采取一些方式更好地促進優秀CSS架構的形成。

　　最好的方法是CSS中盡可能少的包含HTML架構。CSS則是應該定義元素的視覺效果，無論該視覺元素在哪裡。如果有一些特定的組件需要在不同的場合顯示不同的效果，那麼應該賦予不同的名稱。例如，CSS通過.button類選擇器定義了一個按鈕組件。如果HTML想要一個特定的元素看起來像按鈕，那麼就可以使用.button。如果這裡