我一直非常依賴CSS來開發我正在工作的網站?，F在，所有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 回答
慕碼人8056858
TA貢獻1803條經驗 獲得超6個贊
這個問題問得好。我所看到的任何地方，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>
湖上湖
TA貢獻2003條經驗 獲得超2個贊
不要在CSS中寫標題
只需將部分拆分為文件。任何CSS注釋都應該是注釋。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
使用腳本將它們組合為一個；如有必要。您甚至還可以擁有一個不錯的目錄結構，只需讓您的腳本以遞歸方式掃描.css文件即可。
如果必須寫標題，請在文件開頭添加目錄
TOC中的標題應與您稍后編寫的標題完全相同。搜索標題很痛苦。更麻煩的是，有人究竟想知道您在第一個標頭之后還有另一個標頭嗎？ps。編寫TOC時，不要在每一行的開頭添加類似doc的*（星號），這只會使選擇文本更加麻煩。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
在規則內或規則內（而不是在塊外）編寫注釋
首先，當您編輯腳本時，您有50/50的機會會注意規則塊之外的內容（尤其是在一大堆文本中）；）。其次，（幾乎）在任何情況下，您都不需要外部“評論”。如果它在外面，則是99％的時間是標題，因此應保持該標題不變。
將頁面拆分為組件
大多數情況下position:relative，組件應具有no padding和no margin。這簡化％原則很多，以及允許更簡單的absolute:position“元素的ING，因為如果有一個絕對定位的容器絕對定位的元素將計算時所使用的容器top，right，bottom，left的屬性。
HTML5文檔中的大多數DIV通常是一個組件。
組件也是可以視為頁面上的獨立單元的東西。用外行的話來說，如果把像黑匣子這樣的東西當作有意義的東西對待就好了。
再次使用“質量檢查”頁面示例：
#navigation
#question
#answers
#answers .answer
etc.
通過將頁面拆分為組件，您可以將工作拆分為可管理的單元。
將具有累積效果的規則放在同一行上。
例如border，margin和padding（但不是outline全部）會增加您要設置樣式的元素的尺寸和大小。
position: absolute; top: 10px; right: 10px;
如果它們在一行上不那么可讀，則至少將它們靠近：
padding: 10px; margin: 20px;
border: 1px solid black;
盡可能使用速記：
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
切勿重復選擇器
如果您有更多相同選擇器的實例，那么您很有可能最終會遇到相同規則的多個實例。例如：
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
當您可以使用ID /類時，避免使用TAG作為選擇器
首先是DIV和SPAN標記是例外：永遠不要使用它們！;）僅使用它們附加一個類/ ID。
這個...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
應該這樣寫：
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
因為那里有多余的懸掛DIV，所以對選擇器沒有任何作用。它們還會強制執行不必要的標簽規則。如果你要改變，例如，.answer從一個div到article你的風格將打破。
或者，如果您希望更清晰：
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
原因是該border-collapse屬性是一個特殊屬性，僅當應用于時才有意義table。如果.statistics不是table，則不適用。
通用規則是邪惡的！
如果可以，請避免編寫通用/魔術規則
除非用于CSS重置/取消重置，否則所有通用魔術都應至少應用于一個根組件
它們沒有節省您的時間，卻使您的頭部爆炸。并使維護成為一場噩夢。在編寫規則時，您可能會知道它們的適用位置，但這并不能保證您的規則以后不會與您混淆。
加上這些通用規則，即使您對文檔的樣式有所了解，也難以理解且難以理解。這并不是說您不應該編寫通用規則，除非您真正打算使它們通用，否則不要使用它們，甚至它們會向選擇器中添加盡可能多的作用域信息。
像這樣的東西
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
...具有與在編程語言中使用全局變量相同的問題。您需要給他們范圍！
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
基本上是這樣的：
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
每當我知道的組件是頁面上的單個組件時，我都喜歡使用ID。您的需求可能有所不同。
注意：理想情況下，您應該編寫足夠的內容。與提及較少的組件相比，在選擇器中提及更多的組件是更寬容的錯誤。
假設您有一個pagination組件。您可以在網站的許多地方使用它。這將是編寫通用規則時的一個很好的例子。假設您display:block為各個頁碼鏈接設置了深灰色背景。為了使它們可見，您必須具有以下規則：
.pagination .pagelist a {
color: #fff;
}
現在，假設您使用分頁獲取答案列表，則可能會遇到類似這樣的情況
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
這會使您的白色鏈接變黑，這是您不需要的。
解決該問題的不正確方法是：
.pagination .pagelist a {
color: #fff !important;
}
解決該問題的正確方法是：
#answers .header .pagination .pagelist a {
color: #fff;
}
復雜的“邏輯”注釋不起作用:)
如果您寫這樣的東西：“此值取決于blah-blah加上blah-blah的高度”，那么不可避免的是您會犯錯，并且它們都會像紙牌屋一樣掉下來。
保持您的評論簡單；如果需要“邏輯運算”，請考慮使用CSS模板語言之一，例如SASS或LESS。
我該如何寫一個彩色托盤？
到此為止。為您的整個彩色托盤準備一個文件。沒有此文件，您的樣式在規則中仍應具有一些可用的調色板。您的顏色托盤應覆蓋。您可以使用非常高級的父級組件（例如#page）來鏈接選擇器，然后將樣式編寫為自足的規則塊。它可以只是顏色或更多。
例如。
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
這個想法很簡單，您的調色板是獨立于基本樣式的樣式表，您可以將其層疊成樣式。
更少的名稱，需要更少的內存，使代碼更易于閱讀
使用較少的名稱更好。理想情況下，使用非常簡單（且簡短?。┑膯卧~：文本，正文，標題。
我還發現，簡單單詞的組合更容易理解，然后加上一長串“適當的”單詞：postbody，posthead，userinfo等。
即使某些陌生人進來閱讀您的風格湯（像幾周后；就像您自己一樣；）），也應使詞匯量保持較小，這只需要了解用詞的位置而不是使用每個選擇器的位置。例如，.this每當一個元素被認為是“所選項目”或“當前項目”等時，我就使用。
自己清理一下
編寫CSS就像吃東西，有時會留下一團糟。確保清理混亂，否則垃圾代碼將堆積。刪除不使用的類/標識。刪除不使用的CSS規則。確保一切都很好，并且沒有沖突或重復的規則。
如果您按照我的建議將某些容器視為樣式中的黑盒（組件），在選擇器中使用了這些組件，并將所有內容保存在一個專用文件中（或使用TOC和標頭正確分割了文件），工作實質上更容易...
您可以使用諸如firefox擴展名Dust-Me Selectors（提示：將其指向您的sitemap.xml）之類的工具來幫助您找到隱藏在CSS核武器和狂歡者中的一些垃圾。
保留unsorted.css檔案
假設您正在對質量檢查網站進行樣式設置，并且已經有了“答案頁面”的樣式表，我們將其稱為answers.css。如果現在需要添加很多新的CSS，請將其添加到unsorted.css樣式表中，然后將其重構為answers.css樣式表。
原因如下：
完成后重構的速度更快，然后就是搜索規則（可能不存在）并注入代碼
您將編寫要刪除的內容，注入代碼只會使刪除該代碼更加困難
附加到原始文件很容易導致規則/選擇器重復
- 3 回答
- 0 關注
- 356 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消