管理CSS爆炸

時間 2019-12-25

標籤管理 css 爆炸欄目 CSS 简体版

原文原文鏈接

我一直很是依賴CSS來開發我正在工做的網站。如今，全部CSS樣式都在每一個標記的基礎上應用，所以如今我嘗試將其移至更多外部樣式中，以幫助未來進行任何更改。 css

可是如今的問題是，我注意到我遇到了「 CSS爆炸」。對我來講，決定如何最好地組織和抽象CSS文件中的數據變得愈來愈困難。 web

我正在網站中使用大量的div標籤，而這些標籤是基於表格的網站。所以，我獲得了許多以下所示的CSS選擇器：編程

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

還算不錯，可是做爲個人初學者，我想知道是否能夠就如何最好地組織CSS文件的各個部分提出建議。我不想爲網站上的每一個元素都擁有單獨的CSS屬性，而且我一直但願CSS文件至關直觀且易於閱讀。 bootstrap

個人最終目標是簡化CSS文件的使用並展現其強大功能以提升Web開發速度。這樣，未來可能在此站點上工做的其餘我的也將參與使用良好編碼實踐的實踐，而沒必要像我之前那樣去實踐。瀏覽器

#1樓

這裏有一些很棒的材料，有些花了一些時間來回答這個問題，可是當涉及到單獨的樣式表或單獨的樣式表時，我將使用單獨的文件進行開發，而後將全部用於站點的通用css合併到一塊兒部署時將其合併爲一個文件。服務器

這樣，您就能夠兼得一箭雙鵰，提升了性能（減小了從瀏覽器請求的HTTP請求），而且在開發時分離了代碼問題。框架

#2樓

不少時候，我會看到我的將文件分紅幾部分，並在各部分之間添加標題註釋。編程語言

就像是 ide

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

它工做得很好，能夠很容易地稍後返回並找到您正在處理的內容。工具

#3樓

這個問題問得好。在我所看到的任何地方，CSS文件都會在一段時間後變得失控-特別是（但不只限於）團隊合做時。

如下是我本人想要遵照的規則（並不是我老是設法作到）。

儘早重構，常常重構。 常常清理CSS文件，將同一類的多個定義融合在一塊兒。當即刪除過期的定義。
在修復錯誤期間添加CSS時，請留意更改的內容（「這是爲了確保該框在IE <7中保持對齊」）
避免冗餘，例如，在.classname和.classname:hover定義相同的內容。
使用註釋/** Head **/創建清晰的結構。
使用有助於保持風格不變的修飾工具。我使用Polystyle ，我很高興（售價15美圓，但花得很值）。也有免費的工具（例如，基於CSS Tidy的 Code Beautifier ，這是一個開放源代碼工具）。
創建明智的課程。請參閱下面的一些注意事項。
使用語義，避免DIV湯-例如，對菜單使用<ul> 。
在儘量低的級別上定義全部內容（例如，默認字體系列， body中的顏色和大小），並在可能的狀況下使用inherit
若是您有很是複雜的CSS，則CSS預編譯器可能會有所幫助。我正計劃出於一樣的緣由研究xCSS 。周圍還有其餘幾個。
若是是團隊合做，請同時強調CSS文件的質量和標準。每一個人都很是重視其編程語言的編碼標準，可是不多有人意識到這對於CSS也是必要的。
若是是團隊合做，請考慮使用版本控制。它使事情更容易跟蹤，而編輯衝突也更容易解決。即便您只是「簡單」地學習HTML和CSS，這也確實值得。
不要與!important 。不只由於IE = <7沒法處理它。在複雜的結構中， !important的使用一般很容易改變沒法找到源的行爲，但這對於長期維護來講是有毒的。

創建明智的班級

這就是我喜歡創建明智的班級的方式。

我首先應用全局設置：

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

而後，我肯定頁面佈局的主要部分，例如頂部區域，菜單，內容和頁腳。 若是我編寫了不錯的標記，那麼這些區域將與HTML結構相同。

而後，我開始構建CSS類，在合理的範圍內儘量多地指定祖先，並儘量地將相關類分組。

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

將整個CSS結構視爲一棵具備愈來愈具體定義的樹，離您的根越遠。您但願將類的數量保持在儘量低的水平，而且但願不多重複。

例如，假設您具備三個級別的導航菜單。這三個菜單看起來不一樣，可是它們也具備某些特徵。例如，它們都是<ul> ，它們都具備相同的字體大小，而且全部項目彼此相鄰（與ul的默認呈現相反）。一樣，全部菜單都沒有任何項目符號點（ list-style-type ）。

首先，在名爲menu的類中定義通用特徵：

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

而後，定義三個菜單中每一個菜單的特定特徵。級別1高40像素； 2和3級，20像素。

注意：您也能夠爲此使用多個類，可是Internet Explorer 6的多個類存在問題 ，所以本示例使用id 。

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

菜單的標記以下所示：

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

若是您在頁面上具備語義上類似的元素（例如這三個菜單），請嘗試先計算出共同點，而後將它們放入類中；而後，計算出特定的屬性並將其應用於類，或者，若是必須支持Internet Explorer 6，則將其應用於ID。

其餘HTML技巧

若是將這些語義添加到HTML輸出中，則設計人員之後可使用純CSS自定義網站和/或應用程序的外觀，這是一個很大的優點，能夠節省時間。

若是可能的話，給每一個頁面的主體一個惟一的類： <body class='contactpage'>這樣能夠很容易地將特定於頁面的調整添加到樣式表中：
```
body.contactpage div.container ul.mainmenu li { color: green }
```
自動構建菜單時，請添加儘量多的CSS上下文，以便之後進行普遍的樣式設置。例如：
```
<ul class="mainmenu"> <li class="item_first item_active item_1"> First item </li> <li class="item_2"> Second item </li> <li class="item_3"> Third item </li> <li class="item_last item_4"> Fourth item </li> </ul>
```
這樣，每一個菜單項均可以根據其語義上下文進行樣式設置：不管是列表中的第一項仍是最後一項；是否爲當前活動項目；和數字。

請注意 ，上面示例中概述的這種分配多個類在IE6中沒法正常工做 。有一種解決方法可使IE6可以處理多個類。若是沒有解決方法，則必須設置對您來講最重要的類（項目編號，使用中的或第一個/最後一個），或者使用ID。

#4樓

我發現困難的是將網站所需的設計轉換爲一系列規則。若是站點的設計清晰且基於規則，那麼您的類名和CSS結構就能夠從中獲得。可是，若是人們隨着時間的推移在站點中隨機添加一些沒有多大意義的內容，那麼CSS中您將無能爲力。

我傾向於這樣組織個人CSS文件：

CSS重置，基於Eric Meyer的。（由於不然我發現，對於大多數元素，我至少有一個或兩個規則只是在重置默認瀏覽器樣式-例如，個人大多數列表看起來都不像列表的默認HTML樣式。）
網格系統CSS（若是站點須要）。（個人基礎是960.gs ）
在每一個頁面上顯示的組件的樣式（頁眉，頁腳等）
在網站的各個地方使用的組件的樣式
僅在個別頁面上相關的樣式

如您所見，大部分取決於站點的設計。若是設計清晰，有條理，則可使用CSS。若是沒有，那你就被搞砸了。