我一直非常依賴CSS來開發(fā)我正在工作的網(wǎng)站?，F(xiàn)在，所有CSS樣式都在每個標(biāo)記的基礎(chǔ)上應(yīng)用，因此現(xiàn)在我嘗試將其移至更多外部樣式中，以幫助將來進(jìn)行任何更改。但是現(xiàn)在的問題是，我注意到我遇到了“ CSS爆炸”。對我來說，決定如何最好地組織和抽象CSS文件中的數(shù)據(jù)變得越來越困難。我正在div從大量基于表格的網(wǎng)站中使用網(wǎng)站中的大量標(biāo)簽。因此，我得到了許多如下所示的CSS選擇器：div.title { background-color: blue; color: white; text-align: center;}div.footer { /* Styles Here */}div.body { /* Styles Here */}/* And many more */還算不錯，但是作為我的初學(xué)者，我想知道是否可以就如何最好地組織CSS文件的各個部分提出建議。我不想為網(wǎng)站上的每個元素都擁有單獨(dú)的CSS屬性，并且我一直希望CSS文件相當(dāng)直觀且易于閱讀。我的最終目標(biāo)是簡化CSS文件的使用并展示其強(qiáng)大功能以提高Web開發(fā)速度。這樣，將來可能在此站點(diǎn)上工作的其他個人也將參與使用良好編碼實(shí)踐的實(shí)踐，而不必像我以前那樣去實(shí)踐。
3 回答
慕碼人8056858
TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個贊
這個問題問得好。我所看到的任何地方，CSS文件都會在一段時間后變得失控-特別是（但不僅限于）團(tuán)隊合作時。
以下是我本人想要遵守的規(guī)則（并非我總是設(shè)法做到）。
盡早重構(gòu)，經(jīng)常重構(gòu)。經(jīng)常清理CSS文件，將同一類的多個定義融合在一起。立即刪除過時的定義。
在修復(fù)錯誤期間添加CSS時，請留意更改的內(nèi)容（“這是為了確保該框在IE <7中保持對齊”）
避免冗余，例如在.classname和中定義相同的內(nèi)容.classname:hover。
使用注釋/** Head **/來構(gòu)建清晰的結(jié)構(gòu)。
使用有助于保持風(fēng)格不變的修飾工具。我使用Polystyle，我很高興（售價15美元，但花得很值）。我確定周圍也有免費(fèi)的（更新：例如，基于CSS Tidy的Code Beautifier，這是一個開放源代碼工具，我還沒有用過，但是看起來很有趣。）
建立明智的課程。請參閱下面的一些注意事項。
使用語義，避免DIV湯- <ul>例如，將s用于菜單。
在盡可能低的級別上定義所有內(nèi)容（例如，中的默認(rèn)字體系列，顏色和大小body），并inherit在可能的情況下使用
如果您有非常復(fù)雜的CSS，則CSS預(yù)編譯器可能會有所幫助。我正計劃出于同樣的原因研究xCSS。周圍還有其他幾個。
如果是團(tuán)隊合作，請同時強(qiáng)調(diào)CSS文件的質(zhì)量和標(biāo)準(zhǔn)。每個人都非常重視其編程語言的編碼標(biāo)準(zhǔn)，但是很少有人意識到這對于CSS也是必要的。
如果是團(tuán)隊合作，請考慮使用版本控制。它使事情更容易跟蹤，而編輯沖突也更容易解決。即使您只是“簡單”地學(xué)習(xí)HTML和CSS，這也確實(shí)值得。
請勿使用!important。不僅因?yàn)镮E = <7無法處理它。在復(fù)雜的結(jié)構(gòu)中，！important的使用通常很容易改變無法找到源的行為，但這對于長期維護(hù)來說是有毒的。
建立明智的班級
這就是我喜歡建立明智的班級的方式。
我首先應(yīng)用全局設(shè)置：
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }
然后，我確定頁面布局的主要部分-例如頂部區(qū)域，菜單，內(nèi)容和頁腳。如果我編寫了不錯的標(biāo)記，這些區(qū)域?qū)⑴cHTML結(jié)構(gòu)相同。
然后，我開始構(gòu)建CSS類，指定盡可能多的祖先和明智的方法，并盡可能將相關(guān)的類分組。
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結(jié)構(gòu)視為一棵具有越來越具體定義的樹，離您的根越遠(yuǎn)。您希望將類的數(shù)量保持在盡可能低的水平，并且希望很少重復(fù)。
例如，假設(shè)您具有三個級別的導(dǎo)航菜單。這三個菜單看起來不同，但是它們也具有某些特征。例如，它們都是<ul>，它們的字體大小都相同，并且所有項目都彼此相鄰（與的默認(rèn)呈現(xiàn)相反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; }
菜單的標(biāo)記如下所示：
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>
如果您在頁面上具有語義上相似的元素（如這三個菜單），請嘗試首先計算出共同點(diǎn)，然后將它們放入類中；然后，計算出特定的屬性并將其應(yīng)用于類，或者，如果必須支持Internet Explorer 6，則將其應(yīng)用于ID。
其他HTML技巧
如果將這些語義添加到HTML輸出中，則設(shè)計人員以后可以使用純CSS自定義網(wǎng)站和/或應(yīng)用程序的外觀，這是一個很大的優(yōu)勢，可以節(jié)省時間。
如果可能的話，給每個頁面的主體一個唯一的類：<body class='contactpage'>這使得將頁面特定的調(diào)整添加到樣式表非常容易：
body.contactpage div.container ul.mainmenu li { color: green }
自動構(gòu)建菜單時，請?zhí)砑颖M可能多的CSS上下文，以便以后進(jìn)行廣泛的樣式設(shè)置。例如：
<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>
這樣，每個菜單項都可以根據(jù)其語義上下文進(jìn)行樣式設(shè)置：無論是列表中的第一項還是最后一項；是否為當(dāng)前活動項目；和數(shù)字。
請注意，上面示例中概述的這種分配多個類在IE6中無法正常工作。有一種解決方法可以使IE6能夠處理多個類。我還沒有嘗試過，但看起來非常有前途，來自Dean Edwards。在此之前，您將必須設(shè)置對您來說最重要的類（項目編號，使用中的或第一個/最后一個）或使用ID。（噓IE6?。?/p>
湖上湖
TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個贊
不要在CSS中寫標(biāo)題
只需將部分拆分為文件。任何CSS注釋都應(yīng)該是注釋。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
使用腳本將它們組合為一個；如有必要。您甚至還可以擁有一個不錯的目錄結(jié)構(gòu)，只需讓您的腳本以遞歸方式掃描.css文件即可。
如果必須寫標(biāo)題，請在文件開頭添加目錄
TOC中的標(biāo)題應(yīng)與您稍后編寫的標(biāo)題完全相同。搜索標(biāo)題很痛苦。更麻煩的是，有人究竟想知道您在第一個標(biāo)頭之后還有另一個標(biāo)頭嗎？ps。編寫TOC時，不要在每一行的開頭添加類似doc的*（星號），這只會使選擇文本更加麻煩。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
在規(guī)則內(nèi)或規(guī)則內(nèi)（而不是在塊外）編寫注釋
首先，當(dāng)您編輯腳本時，您有50/50的機(jī)會會注意規(guī)則塊之外的內(nèi)容（尤其是在一大堆文本中）；）。其次，（幾乎）在任何情況下，您都不需要外部“評論”。如果它在外面，則是99％的時間是標(biāo)題，因此應(yīng)保持該標(biāo)題不變。
將頁面拆分為組件
大多數(shù)情況下position:relative，組件應(yīng)具有no padding和no margin。這簡化％原則很多，以及允許更簡單的absolute:position“元素的ING，因?yàn)槿绻幸粋€絕對定位的容器絕對定位的元素將計算時所使用的容器top，right，bottom，left的屬性。
HTML5文檔中的大多數(shù)DIV通常是一個組件。
組件也是可以視為頁面上的獨(dú)立單元的東西。用外行的話來說，如果把像黑匣子這樣的東西當(dāng)作有意義的東西對待就好了。
再次使用“質(zhì)量檢查”頁面示例：
#navigation
#question
#answers
#answers .answer
etc.
通過將頁面拆分為組件，您可以將工作拆分為可管理的單元。
將具有累積效果的規(guī)則放在同一行上。
例如border，margin和padding（但不是outline全部）會增加您要設(shè)置樣式的元素的尺寸和大小。
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;
切勿重復(fù)選擇器
如果您有更多相同選擇器的實(shí)例，那么您很有可能最終會遇到相同規(guī)則的多個實(shí)例。例如：
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
當(dāng)您可以使用ID /類時，避免使用TAG作為選擇器
首先是DIV和SPAN標(biāo)記是例外：永遠(yuǎn)不要使用它們！;）僅使用它們附加一個類/ 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;
}
應(yīng)該這樣寫：
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
因?yàn)槟抢镉卸嘤嗟膽覓霥IV，所以對選擇器沒有任何作用。它們還會強(qiáng)制執(zhí)行不必要的標(biāo)簽規(guī)則。如果你要改變，例如，.answer從一個div到article你的風(fēng)格將打破。
或者，如果您希望更清晰：
#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屬性是一個特殊屬性，僅當(dāng)應(yīng)用于時才有意義table。如果.statistics不是table，則不適用。
通用規(guī)則是邪惡的！
如果可以，請避免編寫通用/魔術(shù)規(guī)則
除非用于CSS重置/取消重置，否則所有通用魔術(shù)都應(yīng)至少應(yīng)用于一個根組件
它們沒有節(jié)省您的時間，卻使您的頭部爆炸。并使維護(hù)成為一場噩夢。在編寫規(guī)則時，您可能會知道它們的適用位置，但這并不能保證您的規(guī)則以后不會與您混淆。
加上這些通用規(guī)則，即使您對文檔的樣式有所了解，也難以理解且難以理解。這并不是說您不應(yīng)該編寫通用規(guī)則，除非您真正打算使它們通用，否則不要使用它們，甚至它們會向選擇器中添加盡可能多的作用域信息。
像這樣的東西
.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
每當(dāng)我知道的組件是頁面上的單個組件時，我都喜歡使用ID。您的需求可能有所不同。
注意：理想情況下，您應(yīng)該編寫足夠的內(nèi)容。與提及較少的組件相比，在選擇器中提及更多的組件是更寬容的錯誤。
假設(shè)您有一個pagination組件。您可以在網(wǎng)站的許多地方使用它。這將是編寫通用規(guī)則時的一個很好的例子。假設(shè)您display:block為各個頁碼鏈接設(shè)置了深灰色背景。為了使它們可見，您必須具有以下規(guī)則：
.pagination .pagelist a {
color: #fff;
}
現(xiàn)在，假設(shè)您使用分頁獲取答案列表，則可能會遇到類似這樣的情況
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
這會使您的白色鏈接變黑，這是您不需要的。
解決該問題的不正確方法是：
.pagination .pagelist a {
color: #fff !important;
}
解決該問題的正確方法是：
#answers .header .pagination .pagelist a {
color: #fff;
}
復(fù)雜的“邏輯”注釋不起作用:)
如果您寫這樣的東西：“此值取決于blah-blah加上blah-blah的高度”，那么不可避免的是您會犯錯，并且它們都會像紙牌屋一樣掉下來。
保持您的評論簡單；如果需要“邏輯運(yùn)算”，請考慮使用CSS模板語言之一，例如SASS或LESS。
我該如何寫一個彩色托盤？
到此為止。為您的整個彩色托盤準(zhǔn)備一個文件。沒有此文件，您的樣式在規(guī)則中仍應(yīng)具有一些可用的調(diào)色板。您的顏色托盤應(yīng)覆蓋。您可以使用非常高級的父級組件（例如#page）來鏈接選擇器，然后將樣式編寫為自足的規(guī)則塊。它可以只是顏色或更多。
例如。
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
這個想法很簡單，您的調(diào)色板是獨(dú)立于基本樣式的樣式表，您可以將其層疊成樣式。
更少的名稱，需要更少的內(nèi)存，使代碼更易于閱讀
使用較少的名稱更好。理想情況下，使用非常簡單（且簡短?。┑膯卧~：文本，正文，標(biāo)題。
我還發(fā)現(xiàn)，簡單單詞的組合更容易理解，然后加上一長串“適當(dāng)?shù)摹眴卧~：postbody，posthead，userinfo等。
即使某些陌生人進(jìn)來閱讀您的風(fēng)格湯（像幾周后；就像您自己一樣；）），也應(yīng)使詞匯量保持較小，這只需要了解用詞的位置而不是使用每個選擇器的位置。例如，.this每當(dāng)一個元素被認(rèn)為是“所選項目”或“當(dāng)前項目”等時，我就使用。
自己清理一下
編寫CSS就像吃東西，有時會留下一團(tuán)糟。確保清理混亂，否則垃圾代碼將堆積。刪除不使用的類/標(biāo)識。刪除不使用的CSS規(guī)則。確保一切都很好，并且沒有沖突或重復(fù)的規(guī)則。
如果您按照我的建議將某些容器視為樣式中的黑盒（組件），在選擇器中使用了這些組件，并將所有內(nèi)容保存在一個專用文件中（或使用TOC和標(biāo)頭正確分割了文件），工作實(shí)質(zhì)上更容易...
您可以使用諸如firefox擴(kuò)展名Dust-Me Selectors（提示：將其指向您的sitemap.xml）之類的工具來幫助您找到隱藏在CSS核武器和狂歡者中的一些垃圾。
保留unsorted.css檔案
假設(shè)您正在對質(zhì)量檢查網(wǎng)站進(jìn)行樣式設(shè)置，并且已經(jīng)有了“答案頁面”的樣式表，我們將其稱為answers.css。如果現(xiàn)在需要添加很多新的CSS，請將其添加到unsorted.css樣式表中，然后將其重構(gòu)為answers.css樣式表。
原因如下：
完成后重構(gòu)的速度更快，然后就是搜索規(guī)則（可能不存在）并注入代碼
您將編寫要刪除的內(nèi)容，注入代碼只會使刪除該代碼更加困難
附加到原始文件很容易導(dǎo)致規(guī)則/選擇器重復(fù)
添加回答
舉報
0/150
提交
取消