(1) 驗(yàn)證HTML文檔的有效性。確保文檔不存在語(yǔ)法問(wèn)題，這樣瀏覽器才能按預(yù)期解析文檔結(jié)構(gòu)。開(kāi)發(fā)者可
以使用W3C驗(yàn)證服務(wù)、W3C麒麟驗(yàn)證器或者各種瀏覽器插件進(jìn)行標(biāo)簽和樣式驗(yàn)證。
(2) 驗(yàn)證每一個(gè)CSS樣式表。確保樣式表不存在語(yǔ)法問(wèn)題，從而確保所有規(guī)則都是有效的。
確保在非零度量值之后使用正確的度量單位（UOM），并且數(shù)字與UOM之間不能添加空格，如1em或loo%。（line-height例外，它允許使用不帶單位的非零度量值。）
確保屬性名稱與值之間只有一個(gè)冒號(hào)（:），但是可以有若干空格，如width:1oo%或width：loo%。
確保每一條規(guī)則均以分號(hào)（;）結(jié)尾，如width:loo%;。
(3) 使用Mozilla瀏覽器的錯(cuò)誤控制臺(tái)，檢查CSS解析錯(cuò)誤清單。瀏覽器會(huì)忽略解析出錯(cuò)的規(guī)則，但是與其他編程語(yǔ)言不同，它們會(huì)繼續(xù)解析和應(yīng)用其他的規(guī)則。
(4) 確認(rèn)選擇器選擇且只選擇了全部應(yīng)該選擇的元素。只需要在選擇器中添加outline:2px solid invert;，就能夠看到選擇器的結(jié)果。（注意，Internet Explorer 7不支持outline，但是支持border。）
(5) 仔細(xì)檢查每一個(gè)沒(méi)有成功應(yīng)用的規(guī)則的層疊優(yōu)先級(jí)。層疊優(yōu)先級(jí)高于文檔順序。例如，#myid {color:red;}優(yōu)先級(jí)高于*.myclass{color:blue;}，而#myid *.myclass{color:green;}優(yōu)先級(jí)至高，這與它們?cè)跇邮奖淼奈恢脽o(wú)關(guān)，而且與它們所在樣式表的加載順序也無(wú)關(guān)。這經(jīng)常會(huì)導(dǎo)致出現(xiàn)問(wèn)題，因?yàn)榫哂懈邇?yōu)先級(jí)的規(guī)則可能位于任意樣式表的任意位置。假設(shè)已經(jīng)驗(yàn)證過(guò)樣式表的有效性，但是發(fā)現(xiàn)選擇器中有一些屬性有效，有一些屬性無(wú)效，那么無(wú)論使用了什么值，往往都 可以確定是層疊優(yōu)先級(jí)出現(xiàn)了問(wèn)題。而且，一般情況下這都是因?yàn)槟硞€(gè)具有更高層疊優(yōu)先級(jí)的規(guī)則覆蓋了其中一些屬性。通常，我們可以在屬性后添加!important來(lái)確認(rèn)這個(gè)問(wèn)題。!important使屬性的優(yōu)先級(jí)高于所有非!important的屬性。如果!important使一個(gè)屬性生效，那么就可以確定發(fā)生了層疊優(yōu)先級(jí)問(wèn)題。
(6) 確認(rèn)樣式表中元素、類(lèi)和ID的大小寫(xiě)與HTML文檔的大小寫(xiě)完全匹配。這是很重要的，因?yàn)閄HTML區(qū)分大小寫(xiě)?？梢钥偸沁x擇使用小寫(xiě)值，以避免出現(xiàn)意外錯(cuò)誤。
(7) 仔細(xì)檢查簡(jiǎn)寫(xiě)屬性，檢查規(guī)則中是否遺漏了屬性值。注意，簡(jiǎn)寫(xiě)屬性會(huì)將值賦給它所代表的全部屬性，哪怕只設(shè)置了一個(gè)值。例如，background:blue;會(huì)將background-color設(shè)置為blue，同時(shí)將background-image設(shè)置為none，將background-repeat設(shè)置為repeat，將background -attachment設(shè)置為scroll，以及將background-position設(shè)置為0% 0%。如果有一條層疊優(yōu)先級(jí)較高的規(guī)則包含background:blue;，而另一條低優(yōu)先級(jí)的規(guī)則原本將backgroundimage設(shè)置為url("image.jpg")，那么這條規(guī)則會(huì)被覆蓋，背景圖片就不會(huì)顯示，因?yàn)楹?jiǎn)寫(xiě)屬性background:blue;已經(jīng)重寫(xiě)了這個(gè)屬性，將background-image變成none。
簡(jiǎn)寫(xiě)屬性包括margin、border、padding、background、font和list-style。
font是一個(gè)非常復(fù)雜的簡(jiǎn)寫(xiě)屬性，因?yàn)樗M合了許多個(gè)屬性，而且所有值都是可以繼承的！這些屬性包括font-family、font-size、font-weight、font-variant、font-style和line-height。注意，即使只給font添加一個(gè)值，如font:1em;，瀏覽器也會(huì)給全部屬性設(shè)置默認(rèn)值。
(8) 確認(rèn)瀏覽器加載了所有樣式表。要確認(rèn)所有樣式表都通過(guò)HTML文檔中<head>部分的<link>語(yǔ)句或樣式表中@import語(yǔ)句成功引用。如果不確定一個(gè)樣式表是否被加載，那么可以在樣式表中添加一條特殊規(guī)則，然后再檢查它是否可以成功應(yīng)用。這條規(guī)則通常要設(shè)置非常顯眼的效果，如*{border:1px solid black;}。
(9) 避免使用@import語(yǔ)句。如果使用了@import語(yǔ)句，一定要將它們寫(xiě)在樣式表開(kāi)頭，確保它的優(yōu)先級(jí)低于樣式表中的其他規(guī)則。
(10) 確認(rèn)樣式表加載順序符合要求，將<link>和@import語(yǔ)句按優(yōu)先級(jí)升序排列。在同一層疊級(jí)別的規(guī)則中，后面鏈接或?qū)霕邮奖淼囊?guī)則會(huì)覆蓋前面的規(guī)則。但是，無(wú)論規(guī)則位于樣式表什么位置，無(wú)論規(guī)則位于鏈接樣式表或是后面導(dǎo)入樣式表，較高層疊優(yōu)先級(jí)的規(guī)則一定會(huì)覆蓋較低層疊優(yōu)先級(jí)的規(guī)則。
(11) 確認(rèn)服務(wù)器是將text/css作為CSS樣式表的Content-Type頭信息發(fā)送。Mozilla瀏覽器只接受內(nèi)容類(lèi)型為text/css的樣式表。在Mozilla瀏覽器中，選擇Web開(kāi)發(fā)者工具條的菜單項(xiàng)View Response Headers（查看響應(yīng)頭），就可以查看HTTP頭信息。
(12) 刪除CSS樣式表中可能存在的HTML元素，如<style>。而且，一定要?jiǎng)h除HTML文檔頭部<style>元素中不小心添加的所有子元素。