CSS'schema'how-to

Question

如何建立一般元素樣式，嵌套元素樣式和分類元素樣式的CSS「模式」或層次結構。對於像我這樣的排名新手來說，我查看的樣式表中的信息量是完全壓倒性的。與內聯樣式屬性相比，人們在創建一個考慮良好的樣式表或表單時遵循什麼過程？

Answer 1

我對它們的內容或內容類型命名我的CSS類的大風扇，例如<UL>含導航「選項卡」將有類=「標籤」。包含日期的標題可以是class =「date」，或者包含前10個列表的有序列表可以具有class =「chart」。同樣，對於ID，可以給頁面頁腳id =「footer」或網站id =「mainLogo」的徽標。我發現它不僅使得類容易記憶，而且還鼓勵適當的級聯CSS。像ol.chart {font-weight：bold; color：blue;} #footer ol.chart {color：green;}非常易讀，並且考慮了CSS選擇器如何通過更具體的方式來增加重量。

適當的縮進也是一個很大的幫助。你的CSS可能會增長很多，除非你想重構你的HTML模板，並且加了一個新的部分到你的網站或想發佈一種新的內容。然而，很難嘗試，你不可避免地必須添加一些新的規則（或例外），而這些規則在原始模式中並未預料到。 Indeting將允許您更快速地掃描大型CSS文件。我個人的偏好是縮進如何具體和/或嵌套的選擇是，像這樣：

ul.tabs { 
    list-style-type: none; 
    } 
     ul.tabs li { 
     float: left; 
     } 
      ul.tabs li img { 
      border: none; 
      } 

這樣「父」始終是最遠的左側和使文本得到通過分解成塊父容器。我也喜歡將樣式表分成幾個部分;首先出現HTML元素的所有選擇器。我認爲這些都是非常通用的，它們應該是真正的第一。在這裏，我把「body {font-size：77％;}」和「a {color：＃FFCC00;}」等等。之後，我會爲頁面的主要框架部分添加選擇器，例如「ul＃mainMenu { float：left;}「和」div＃footer {height：4em;}「。然後到公共對象類「td.price {text-align：right;}」，最後再加上一些額外的小部分，比如「.clear {clear：both;}」。這就是我喜歡做的事情 - 我相信有更好的方法，但它對我有用。

最後，一對夫婦提示：

1. 使級聯盡其用，不「上層階級」的東西。如果您給出< ul class =「textNav」，那麼您可以訪問它的子項和他們的子項，而不必添加任何額外的班級分配。 ul.textNav li a：hover {}

2. 不要害怕在單個對象上使用多個類。這是完全有效的，非常有用。然後，您可以控制來自多個軸的對象組的CSS。同時給該對象一個ID還添加了第三個軸。例如：

   <style> 
   div.box { 
   float: left; 
   border: 1px solid blue; 
   padding: 1em; 
   } 
   
   div.wide { 
   width: 15em; 
   } 
   
   div.narrow { 
   width: 8em; 
   } 
   
   div#oddOneOut { 
   float: right; 
   } 
   </style> 
   
   <div class="box wide">a wide box</div> 
   <div class="box narrow">a narrow box</div> 
   <div class="box wide" id="oddOneOut">an odd box</div> 
   

3. 給人一種類文檔<身體>標籤（或ID，因爲應該永遠只能是一個......）使各個網頁一些漂亮的覆蓋，如高亮顯示了菜單項的頁面上，或者在登錄頁面上刪除多餘的第二個登錄表單，所有這些僅使用CSS。 「body.signIn DIV＃MAINMENU form.signIn {顯示：無;}」

我希望你能找到至少我的一些胡言亂語的有用，希望您與您的項目最好的！

Answer 2

一年的轉出行：取決於。

你需要多少樣式？你是否需要改變每個元素的alomost方面，還是隻有少數？

我最喜歡的地方是這樣的信息是CSS Zen Garden & A List Apart。

Answer 3

將您的所有CSS聲明放入大致相同的順序，因爲它們將落在文檔層次結構中通常是件好事。這使得未來的讀者很容易看到哪些屬性將被繼承，因爲這些類將在文件中更高。

此外，這是與你的問題正交，但如果你正在尋找一個工具來幫助你閱讀一個CSS文件，看看如何一切都擺脫了，我不能推薦Firebug足夠。

Answer 4

有許多不同的事情可以幫助您組織CSS。例如：

• 將您的CSS拆分爲多個文件。例如：有一個佈局文件，一個文本文件，一個用於重置樣式等。
• 評論你的CSS代碼。
• 爲什麼不添加目錄？
• 嘗試使用像960.gs這樣的CSS框架來開始。

這一切都歸功於個人品味。但這裏有幾個鏈接，你可能會發現有用：

• http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/
• http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
• http://www.louddog.com/bloggity/2008/03/css-best-practices.php
• http://natbat.net/2008/Sep/28/css-systems/

Answer 5

有兩個世界：

1. The human editor perspective: CSS最容易理解的地方，當它具有清晰的結構，良好的格式，詳細的名稱，結構化的佈局，顏色和排版...
2. The consumer perspective:如果你的網站看起來很完美，他的瀏覽器，所以CSS必須很小，在一個文件（以節省更多的連接），幷包含CSS黑客來支持所有的瀏覽器。

我建議你開始一個CSS framework：

• Blueprint如果你喜歡更小的東西
• 或YAML一個大和功能一個

還有一個list of CSS Frameworks。 ..

然後把它形成（for瀏覽器）與CSS Optimizer（p.e. CSS Form.&Opti.）

您可以使用YSlow來測量結果（非樁化< - >優化）。

Answer 6

將CSS想象爲創建HTML可引用的「工具箱」。以下規則將有所幫助：

• 使class名稱無歧義。在大多數情況下，這意味着以可預測的方式加上前綴。例如，而不是left，請使用類似header_links_object2_left的東西。

• 使用id而不是class只有如果你知道將只有永遠是頁面上的對象之一。再次，使id毫不含糊。

• 考慮副作用。像margin和padding,float和clear等規則都可能對其他元素產生意想不到的後果。

• 如果你的樣式表使用我的幾個HTML編碼器，可以考慮將它們寫一個小的，明確的指引，以如何編寫HTML，以配合您的方案。保持簡單，否則你會厭倦他們。

和往常一樣，在多個瀏覽器進行測試，在多個操作系統上，在許多不同的網頁，和任何其他異常情況下，你能想到的。爲了保持組織

Answer 7

再提一些建議：

• 在每一個聲明，採取你堅持屬性的順序。例如，我通常列表頁邊距，填充，高度，寬度，邊框，字體，顯示/浮點/等，按照這個順序，允許更容易的可讀性在我的下一個提示
• 寫你的CSS像你將任何其他代碼：縮進！這很容易掃描高層次元素的CSS文件，然後向下鑽取，而不是簡單地通過你的HTML源有條不紊。
• 具有良好的類名的語義HTML可以幫助很多與記憶適用於哪些元素是什麼款式。

Answer 8

我收到的最好的組織建議來自An Event Apart的演講。

假設你藏在心裏，在一個單一的樣式，有基本上五個部分，以它：

1. 復位規則（可能是因爲 * {margin: 0; padding: 0}規則， Eric Meyer的復位，或YUI 一樣簡單重置）
2. 基本元素樣式;這 是像基本排版 的東西的段落，列表的間距， 等
3. 通用類;對我來說這部分 通常包含的東西 像.error，.left（我只有80％ 語義）等
4. 通用 佈局/ IDS; #content，#header, 或任何你已經將你的頁面切入 。
5. 特定於頁面的規則;如果你 需要修改現有的樣式 只爲一個或幾個頁面，貼 唯一的ID高達（body標籤是 一般良好），並在文件末尾折騰你 覆蓋

我不推薦使用CSS框架，除非你需要在HTML 快速中模擬一些東西。它們太臃腫了，我從來沒有見過一個語義對我有意義的人。隨着時間的推移，找出項目共享的代碼，創建自己的「框架」會更好。

閱讀其他人的代碼是另一個問題，因此我祝你好運。那裏有一些真正可怕的CSS。