萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS框架開發指南

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.

  

  

 

  

 

  .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。如果這裡

copyright © 萬盛學電腦網 all rights reserved