我一直非常依賴CSS來開發我正在工作的網站。現在，所有CSS樣式都在每個標記的基礎上應用，因此現在我嘗試將其移至更多外部樣式中，以幫助將來進行任何更改。但是現在的問題是，我注意到我遇到了“ CSS爆炸”。對我來說，決定如何最好地組織和抽象CSS文件中的數據變得越來越困難。我正在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文件相當直觀且易于閱讀。我的最終目標是簡化CSS文件的使用并展示其強大功能以提高Web開發速度。這樣，將來可能在此站點上工作的其他個人也將參與使用良好編碼實踐的實踐，而不必像我以前那樣去實踐。
3 回答
蠱毒傳說
TA貢獻1895條經驗 獲得超3個贊
這個問題問得好。我所看到的任何地方，CSS文件都會在一段時間后變得失控-特別是（但不僅限于）團隊合作時。
以下是我本人想要遵守的規則（并非我總是設法做到）。
盡早重構，經常重構。經常清理CSS文件，將同一類的多個定義融合在一起。立即刪除過時的定義。
在修復錯誤期間添加CSS時，請留意更改的內容（“這是為了確保該框在IE <7中保持對齊”）
避免冗余，例如在.classname和中定義相同的內容.classname:hover。
使用注釋/** Head **/來構建清晰的結構。
使用有助于保持風格不變的修飾工具。我使用Polystyle，我很高興（售價15美元，但花得很值）。我確定周圍也有免費的（更新：例如，基于CSS Tidy的Code Beautifier，這是一個開放源代碼工具，我還沒有用過，但是看起來很有趣。）
建立明智的課程。請參閱下面的一些注意事項。
使用語義，避免DIV湯- <ul>例如，將s用于菜單。
在盡可能低的級別上定義所有內容（例如，中的默認字體系列，顏色和大小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能夠處理多個類。我還沒有嘗試過，但看起來非常有前途，來自Dean Edwards。在此之前，您將必須設置對您來說最重要的類（項目編號，使用中的或第一個/最后一個）或使用ID。（噓IE6?。?/p>
- 3 回答
- 0 關注
- 546 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消