摘要：以下為正確示例規(guī)則說(shuō)明與示例規(guī)則此規(guī)則意在防止在及早期游覽器上因?yàn)榻馕鲎煮w鏈接的而產(chǎn)生的錯(cuò)誤。如下這里類指明了背景圖片，其它類則指明背景圖片的位置。

文章為csslint中文版譯文，點(diǎn)擊原文可查看英文版，如遇到翻譯錯(cuò)誤或錯(cuò)別字啥的，請(qǐng)留言指出~ 
規(guī)則列表如下

adjoining-classes

box-model

box-sizing

bulletproof-font-face

compatible-vendor-prefixes

empty-rules

display-property-grouping

duplicate-background-images

duplicate-properties

fallback-colors

floats

font-faces

font-sizes

gradients

ids

import

important

known-properties

outline-none

overqualified-elements

qualified-headings

regex-selectors

shorthand

star-property-hack

text-indent

underscore-property-hack

unique-headings

universal-selector

unqualified-attributes

vendor-prefix

zero-units

像.foo.bar這樣的相鄰類，也可以稱之為類鏈。在CSS規(guī)范中允許使用，但在IE6即更早版本中可能就不好使了。IE僅會(huì)命中.bar選擇器，也就是說(shuō)你的選擇器不會(huì)按你的套路出牌，埋下游覽器樣式兼容性問(wèn)題的種子。(不用IE6的 放心大膽的使用吧)

通常來(lái)說(shuō)，基于單類來(lái)定義一個(gè)樣式要比多類定義更好?？梢猿虺蛳胂胂旅娴睦樱?/p>

.foo {
    font-weight: bold;
}
.bar {
    padding: 10px;
}
.foo.bar {
    color: red;
}

選擇器.foo.bar的規(guī)則，可以用一個(gè)新類進(jìn)行重寫:

.foo {
    font-weight: bold;
}
.bar {
    padding: 10px;
}
.baz {
    color: red;
}

那么這個(gè)新類 baz 必須添加至原有的HTML元素上。這樣更利于維護(hù)，因?yàn)?b>.baz 規(guī)則，此刻就可以被復(fù)用了，而.foo.bar規(guī)則只能被用在前一種固有的情況下。

規(guī)則說(shuō)明與示例

規(guī)則 ID: adjoining-classes

此規(guī)則意在指出 使用相鄰類時(shí)，在IE6即更早版本時(shí)會(huì)出現(xiàn)匹配失敗的情況。

以下例子將會(huì)出現(xiàn)警告:

.foo.bar {
    border: 1px solid black;
}
.first .abc.def {
    color: red;
}

以下例子將不會(huì)出現(xiàn)警告:

/* 兩個(gè)類中間有空格 */
.foo .bar {
    border: 1px solid black;
}

盒子模型是CSS當(dāng)中最常誤解的內(nèi)容之一。"盒子模型 (Box model)"會(huì)參考一系列盒子屬性來(lái)最終確定元素的顯示。盒子的最里層為 內(nèi)容。內(nèi)容被內(nèi)邊距包裹，內(nèi)邊距之外再由邊框包裹。盒子最終的寬高也就由以上的屬性相互影響，是不是有些小困惑。來(lái)，看下面的例子：

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

新手可能會(huì)覺(jué)得擁有mybox類的元素寬度為100像素。但實(shí)際上呢，寬度是112像素，這是因?yàn)楹凶幽Ｐ湍J(rèn)為內(nèi)容盒子，寬度最終由 內(nèi)容、內(nèi)邊距、邊框相加而得。如果開(kāi)發(fā)人員不清楚盒子模型，那對(duì)此例子的寬度就會(huì)不一致。

通過(guò)將box-sizing屬性值設(shè)置為border-box,可以使絕大多數(shù)游覽器遵循 寬高是 元素本身的全尺寸，例子如下:

.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

現(xiàn)在，這個(gè)擁有mybox類的元素，實(shí)際寬度就為100像素了,內(nèi)邊距與邊框 將占據(jù)其中的空間，剩下的88像素將是內(nèi)容的寬度。

規(guī)則 ID: box-model

此規(guī)則 意在消除潛在的盒子模型大小問(wèn)題。因此，規(guī)則將在以下情況出現(xiàn)警告:

1.width被與border,border-left,border-right,padding,padding-left,padding-right屬性同時(shí)使用時(shí)

2.height被與border,border-top,border-bottom,padding,padding-top,padding-bottom屬性同時(shí)使用時(shí)

如果box-sizing屬性已指定，則假定你已非常清楚盒子模型的規(guī)則,以上的情況，此規(guī)則將不會(huì)出現(xiàn)警告。

以下的例子將會(huì)出現(xiàn)警告:

/* width and border */
.mybox {
    border: 1px solid black;
    width: 100px;
}

/* height and padding */
.mybox {
    height: 100px;
    padding: 10px;
}

以下的例子將 不會(huì) 出現(xiàn)警告:

/* width and border with box-sizing */
.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    width: 100px;
}

/* width and border-top */
.mybox {
    border-top: 1px solid black;
    width: 100px;
}

/* height and border-top of none */
.mybox {
    border-top: none;
    height: 100px;
}

CSS的box-sizing屬性用來(lái)定義 邊框，內(nèi)邊距，是如何相互影響寬度和高度的。此屬性默認(rèn)值為content-box，意思是 寬和高是由元素內(nèi)容本身決定，然后 內(nèi)邊距與邊框 再將內(nèi)容包裹上。請(qǐng)看以下例子:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

這個(gè)盒子的實(shí)際寬度為112像素。這是因?yàn)閮?nèi)容將占據(jù)100像素的寬度，然后內(nèi)容兩側(cè)分別加上5像素的內(nèi)邊距，接著兩側(cè)再加上1像素的邊框。

當(dāng)你將box-sizing的屬性值改變至border-box時(shí)，計(jì)算方式則不同了:

.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

此盒子的實(shí)際寬度為100像素而其中供內(nèi)容的可用空間為88像素(100-5px[左]內(nèi)邊距-5px[右]內(nèi)邊距-1px[左]邊框-1px[右]邊框)。大多數(shù)情況下認(rèn)為border-box的設(shè)置更加合乎邏輯，也更像寬高屬性表達(dá)的含義。

但是呢但是呢,在使用box-sizing時(shí)會(huì)有個(gè)小小的問(wèn)題,也就是IE6 IE7是不支持box-sizing這個(gè)屬性的。因此會(huì)展示出不同于盒子模型設(shè)置屬性的效果。

規(guī)則 ID: box-sizing

此規(guī)則在box-sizing屬性使用時(shí)會(huì)出現(xiàn)警告。其含義即 提示開(kāi)發(fā)者 此屬性在IE6 IE7或更早期的游覽器上得不到支持。

以下示例將會(huì)出現(xiàn)警告:

.mybox {
    box-sizing: border-box;
}

.mybox {
    box-sizing: content-box;
}

當(dāng)使用@font-face來(lái)跨游覽器聲明 多字體類型時(shí)，你會(huì)發(fā)現(xiàn)在老版IE中出現(xiàn)404錯(cuò)誤，這是因?yàn)槔习鍵E在解析字體聲明時(shí)的缺陷(BUG)。來(lái)~ 舉個(gè)例子:

@font-face {
    font-family: "MyFontFamily";
    src: url("myfont-webfont.eot") format("embedded-opentype"), 
        url("myfont-webfont.woff") format("woff"), 
        url("myfont-webfont.ttf")  format("truetype"),
        url("myfont-webfont.svg#svgFontName") format("svg");
}

在IE6，7和8上將會(huì)出現(xiàn)404錯(cuò)誤。解決辦法是在第一個(gè)字體鏈接后加上 ? (問(wèn)號(hào))，接下來(lái) IE 會(huì)把 余下的屬性值看作查詢字符串。以下為正確示例:

@font-face {
    font-family: "MyFontFamily";
    src: url("myfont-webfont.eot?#iefix") format("embedded-opentype"), 
        url("myfont-webfont.woff") format("woff"), 
        url("myfont-webfont.ttf")  format("truetype"),
        url("myfont-webfont.svg#svgFontName") format("svg");
}

規(guī)則 ID: bulletproof-font-face

此規(guī)則意在防止 在IE8及早期游覽器上 因?yàn)榻馕鲎煮w鏈接的BUG而產(chǎn)生的404錯(cuò)誤。

以下示例會(huì)出現(xiàn)警告:

@font-face {
    font-family: "MyFontFamily";

    /* First web font is missing query string */
    src: url("myfont-webfont.eot") format("embedded-opentype"), 
        url("myfont-webfont.woff") format("woff"), 
        url("myfont-webfont.ttf")  format("truetype"),
        url("myfont-webfont.svg#svgFontName") format("svg");
}

以下示例將 不會(huì) 出現(xiàn)警告:

@font-face {
    font-family: "MyFontFamily";
    src: url("myfont-webfont.eot?#iefix") format("embedded-opentype"), 
        url("myfont-webfont.woff") format("woff"), 
        url("myfont-webfont.ttf")  format("truetype"),
        url("myfont-webfont.svg#svgFontName") format("svg");
}

此規(guī)則要求 第一個(gè)字體聲明為 帶查詢字符串的 .eot文件，但不會(huì)檢測(cè)余下的字體鏈接(假定你已有了.eot文件，這就無(wú)所謂了)

實(shí)驗(yàn)性的CSS屬性，通常需要添加游覽器前綴，方能實(shí)現(xiàn)其效果。當(dāng)然，等到標(biāo)準(zhǔn)的最終統(tǒng)一與建立就不需要再添加前綴了。許多CSS3屬性對(duì)應(yīng)都有多種前綴，包括 Firefox(-moz)，Safari/Chrome(-webkit)，Opera(-o)，和 Internet Explorer(-ms)。因?yàn)榍熬Y過(guò)多，我們?cè)谑褂眯聦傩詴r(shí)就很容易忘記 添加游覽器前綴。

以下屬性建議追加多內(nèi)核前綴:

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

appearance

border-end

border-end-color

border-end-style

border-end-width

border-image

border-radius

border-start

border-start-color

border-start-style

border-start-width

box-align

box-direction

box-flex

box-lines

box-ordinal-group

box-orient

box-pack

box-sizing

box-shadow

column-count

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-width

hyphens

line-break

margin-end

margin-start

marquee-speed

marquee-style

padding-end

padding-start

tab-size

text-size-adjust

transform

transform-origin

transition

transition-delay

transition-duration

transition-property

transition-timing-function

user-modify

user-select

word-break

writing-mode

如果想讓你的CSS效果跨游覽器支持，那么給新CSS屬性增加對(duì)應(yīng)的游覽器前綴就非常重要了。

規(guī)則 ID: compatible-vendor-prefixes

此規(guī)則將在 缺失游覽器前綴的屬性時(shí) 出現(xiàn)警告。支持的屬性已在上方列表中羅列。

以下示例將會(huì)出現(xiàn)警告:

/* Missing -moz, -ms, and -o */
.mybox {
    -webkit-transform: translate(50px, 100px);
}

/* Missing -webkit */
.mybox {
    -moz-border-radius: 5px;
}

空規(guī)則即 不包含任意屬性(沒(méi)有定義樣式屬性) ，如下:

.foo {
}

許多時(shí)候呢，空規(guī)則的出現(xiàn)是因?yàn)?重構(gòu)了樣式而忘記刪除冗余代碼造成的。消除空規(guī)則 縮小了樣式文件大小 與 精簡(jiǎn)了待游覽器處理的樣式信息。

規(guī)則 ID: empty-rules

此規(guī)則 在CSS樣式中發(fā)現(xiàn)為空規(guī)則時(shí) 出現(xiàn)警告。以下示例將會(huì)出現(xiàn)警告:

.mybox { }

.mybox {

}

.mybox { /* a comment */ }

.mybox {
    /* a comment */
}

盡管你可以在CSS中定義任意的組合規(guī)則，但是呢，其中有些規(guī)則會(huì)因?yàn)?元素設(shè)置了display屬性，而忽略你所設(shè)置的規(guī)則。這會(huì)導(dǎo)致你的CSS文件中出現(xiàn)臟代碼，同時(shí)也誤解了規(guī)則理應(yīng)如何運(yùn)轉(zhuǎn)的。

當(dāng) display:inline時(shí), width,height,margin-top,margin-bottom,和float屬性的設(shè)置 將不會(huì)起到作用，因?yàn)?內(nèi)聯(lián)(inline)元素不是一個(gè)規(guī)則的盒子模型，也就無(wú)從設(shè)置這些屬性。而 margin-left和margin-right依舊能起效是為了保證 縮進(jìn) 的目的，其它的外邊距(margin) 設(shè)置則起不到效果。float屬性有時(shí)會(huì)用作修復(fù) IE6 double-margin bug.

其它基于display的情形有:

display:inline-block 不應(yīng)與 float 同時(shí)使用。

display:block 不應(yīng)與 vertical-align 同時(shí)使用。

display:table-* 不應(yīng)與 margin" 或 float` 同時(shí)使用。

移除這些會(huì)被忽略或有問(wèn)題的屬性，能減小文件體積從而改善性能。

規(guī)則 ID: display-property-grouping

此規(guī)則 將標(biāo)識(shí)出 與display屬性同時(shí)使用 而不起效的屬性。其目的是使CSS文件更精簡(jiǎn)，更清晰而無(wú)多余代碼。因此，檢測(cè)出以下代碼時(shí)，提示警告:

display:inline 與 width,height,margin,margin-top,margin-bottom,float 。

display:inline-block 與 float 同時(shí)使用。

display:block 與 vertical-align 同時(shí)使用。

display:table-* 與 margin" 或 float` 同時(shí)使用。

以下示例將提示警告:

/* inline with height */
.mybox {
    display: inline;
    height: 25px;
}

/* inline-block with float */
.mybox {
    display: inline-block;
    float: left;
}

/* table-cell and margin */
.mybox {
    display: table-cell;
    margin: 10px;
}

以下示例將 不會(huì) 提示警告:

/* inline with margin-left */
.mybox {
    display: inline;
    margin-left: 10px;
}

/* table and margin */
.mybox {
    display: table;
    margin-bottom: 10px;
}

盡可能的使用較少的代碼來(lái)完成功能，是高性能的準(zhǔn)則之一。因此，同個(gè)URLS鏈接地址在CSS中只出現(xiàn)一次最好。如果你有多個(gè)樣式類 需要使用同一背景圖片，那么最好聲明一個(gè) 包含此圖片地址的通用樣式類，接著 添加至需要使用的元素之上。請(qǐng)看下面代碼:

.heart-icon {
    background: url(sprite.png) -16px 0 no-repeat;
}

.task-icon {
    background: url(sprite.png) -32px 0 no-repeat;
}

在兩個(gè)類中重復(fù)定義了背景圖片地址。這是你本不需要的冗余代碼，同時(shí)呢，當(dāng)你修改了圖片文件名，也增加了忘記同時(shí)修改文件中兩處圖片地址的可能性。一種解決方式為，抽取一個(gè)圖片地址類(作為復(fù)用類)，然后將此類添加至原有HTML元素上。如下:

.icons {
    background: url(sprite.png) no-repeat;
}

.heart-icon {
    background-position: -16px 0;
}

.task-icon {
    background-position: -32px 0;
}

這里,icons類指明了背景圖片，其它類則指明背景圖片的位置。

規(guī)則 ID: duplicate-background-images

此規(guī)則意在 確保同一鏈接地址不會(huì)在樣式層疊表中重復(fù)。

以下示例將會(huì)提示警告:

/* multiple instances of the same URL */
.heart-icon {
    background: url(sprite.png) -16px 0 no-repeat;
}

.task-icon {
    background: url(sprite.png) -32px 0 no-repeat;
}

以下示例將 不會(huì)提示警告:

/* single instance of URL */
.icons {
    background: url(sprite.png) no-repeat;
}

.heart-icon {
    background-position: -16px 0;
}

.task-icon {
    background-position: -32px 0;
}

在早先網(wǎng)頁(yè)開(kāi)發(fā)中，相同的CSS屬性出現(xiàn)了兩次則毫無(wú)疑問(wèn)是有問(wèn)題的，特別是 如果有兩個(gè)不同的值，如下:

.mybox {
    width: 100px;
    width: 120px;
}

任何人看到此處的代碼都清楚的知道是錯(cuò)誤的。但是最近呢，復(fù)用屬性可以用來(lái)解決 高低版游覽器對(duì)CSS屬性的支持度情況。舉個(gè)例子，部分游覽器支持RGBA色彩，而其它的則不行，那么出現(xiàn)以下的示例，就十分正常合理了:

.mybox {
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
}

此處重復(fù)很明顯是有意為之。開(kāi)發(fā)者想在支持RGBA的游覽器上使用其效果，而不支持的游覽器則使用傳統(tǒng)的純色。

規(guī)則 ID: duplicate-properties

此規(guī)則 意在找出重復(fù)定義的CSS屬性代碼。警告將出現(xiàn)在:

屬性出現(xiàn)兩次且為相同的值。

屬性出現(xiàn)兩次且被至少一個(gè)其它的屬性所隔開(kāi)。

以下示例將會(huì)提示警告:

/* properties with the same value */
.mybox {
    border: 1px solid black;
    border: 1px solid black;
}

/* properties separated by another property */
.mybox {
    border: 1px solid black;
    color: green;
    border: 1px solid red;
}

以下示例將 不會(huì)提示警告:

/* one after another with different values */
.mybox {
    border: 1px solid black;
    border: 1px solid red;
}

剛開(kāi)始時(shí)，有三種方式來(lái)指定顏色：使用16進(jìn)制,、使用3或6位字符串、使用顏色名稱 如 red 或 rgb()。但在CSS3中，新增了幾種顏色定義的形式，包括 rgba(),hsl(),hsla()。這些新的顏色格式 顯著提升了開(kāi)發(fā)者使用色彩的靈活可塑性，同時(shí)使得那些老版游覽器看上去更糟了。

這個(gè)規(guī)則源于 游覽器的CSS解析器 會(huì)略過(guò)不識(shí)別的名稱或值。像IE8或更早的這類老版游覽器，不識(shí)別 rgba(),hsl(),hsla(),其結(jié)果就是會(huì)忽略定義的屬性。請(qǐng)看如下代碼:

.box {
    background: #000;
    color: rgba(100, 100, 200, 0.5);
}

支持此格式的游覽器將正常解析此CSS代碼。但不支持的游覽器，因不能解析rgba的值而完全忽略此color的屬性。也就意味著color的實(shí)際值將繼承至上下文環(huán)境，也可能最終值為黑色(與背景色一致)。為防止此情況，就需要使用十六進(jìn)制顏色值、顏色名稱或rga()格式來(lái)設(shè)定一個(gè)備用色彩，如下:

.box {
    background: #000;
    color: blue;
    color: rgba(100, 100, 200, 0.5);
}

備用色彩 須要在 新顏色格式的前方定義，以確保 老版游覽器能正常解析并使用，新版游覽器也能繼續(xù)執(zhí)行新的顏色格式。

規(guī)則 ID: fallback-colors

此規(guī)則 意在確保在所有的游覽器上都能顯示合適的顏色。為此，將在如下情形 提示警告:

color屬性使用rgba(),hsl(),hsla()顏色值時(shí),在前處 未使用針對(duì)老版游覽器的color顏色格式。

background屬性使用rgba(),hsl(),hsla()顏色值時(shí),在前處 未使用針對(duì)老版游覽器的background顏色格式。

background-color屬性使用rgba(),hsl(),hsla()顏色值時(shí),在前處 未使用針對(duì)老版游覽器的background-color顏色格式。

以下示例將會(huì)提示警告:

/* missing fallback color */
.mybox {
    color: rgba(100, 200, 100, 0.5);
}

/* missing fallback color */
.mybox {
    background-color: hsla(100, 50%, 100%, 0.5);
}

/* missing fallback color */
.mybox {
    background: hsla(100, 50%, 100%, 0.5) url(foo.png);
}

/* fallback color should be before */
.mybox {
    background-color: hsl(100, 50%, 100%);
    background-color: green;
}

以下示例將 不會(huì)提示警告:

/* fallback color before newer format */
.mybox {
    color: red;
    color: rgba(255, 0, 0, 0.5);
}

float屬性 是CSS中實(shí)現(xiàn)多列布局 廣受歡迎的方式。在項(xiàng)目中，越來(lái)越多的float元素被用來(lái)創(chuàng)建不同的 頁(yè)面布局或站點(diǎn)布局。如果此時(shí)改變布局，則會(huì)使得CSS代碼十分脆弱，難以維護(hù)。

通常，使用很多的float意味 你的項(xiàng)目將得益于網(wǎng)格系統(tǒng)。CSS網(wǎng)格系統(tǒng)使用CSS類來(lái)實(shí)現(xiàn)標(biāo)準(zhǔn)的多列布局，一些熱門的網(wǎng)格系統(tǒng)有:

960gs

Blueprint

OOCSS Grids

YUI Grids

[Twitter Bootstrap] (http://getbootstrap.com)

使用以上其中一種網(wǎng)格系統(tǒng)，將極大的減少你需要編寫的CSS代碼。

規(guī)則 ID: floats

此規(guī)則 意在監(jiān)察使用float次數(shù)從而減少代碼復(fù)雜度。當(dāng)float出現(xiàn) 超過(guò)10次時(shí)，將提示警告。使用float頻率超過(guò)10次，意味著代碼中有許多 多列布局的定義，那么通過(guò)引用網(wǎng)格系統(tǒng)框架，將更利于你的代碼維護(hù)。

網(wǎng)絡(luò)字體越來(lái)越流行，@font-face使用頻率也隨之增加。但是，當(dāng)字體文件過(guò)大，以及部分游覽器在下載字體文件時(shí),會(huì)阻塞渲染，就帶來(lái)了顯示性能的隱患。出于這個(gè)原因，CSSlint將在樣式表中監(jiān)測(cè) 出現(xiàn)超過(guò) 5次 網(wǎng)絡(luò)字體引用時(shí)，提示警告。

一個(gè)利于維護(hù)的站點(diǎn)，通常都有通用的字體集。這些字體大小，往往定義在一個(gè)代表其含義的抽象類當(dāng)中，以便運(yùn)用到站點(diǎn)的各個(gè)使用場(chǎng)景。如果未抽取出公用類，會(huì)導(dǎo)致開(kāi)發(fā)者頻繁的使用font-size,來(lái)使元素大小按預(yù)期顯示。這就帶來(lái)了一個(gè)問(wèn)題，當(dāng)設(shè)計(jì)的字體大小改變后，我們需要改變樣式中所有設(shè)計(jì)的字體大小。而抽取出類時(shí)，只用改變類中定義的大小即可做到全局調(diào)整。

你可以創(chuàng)建一些標(biāo)準(zhǔn)字體大小類，如:

.small {
    font-size: 8px;
}

.medium {
    font-size: 11px;
}

.large {
    font-size: 14px;
}

在你的項(xiàng)目中使用以上類，能確保字體大小始終保持一致性，也限制了font-size在CSS文件中出現(xiàn)的次數(shù)。此時(shí)，只需要改變一處字體大小的設(shè)置，就可實(shí)現(xiàn)之前需要修改多處的效果。

規(guī)則 ID:font-sizes

此規(guī)則意在強(qiáng)調(diào) 把過(guò)多字體大小的定義，轉(zhuǎn)而至 統(tǒng)一定義為一個(gè)類的好處。規(guī)則 在使用 font-size 超過(guò)10次時(shí) 提示警告。

截止2011年12月份，CSS漸變的標(biāo)準(zhǔn)定義還未定稿，也就是說(shuō) 想跨游覽器實(shí)現(xiàn)色彩漸變，需要使用很多不同的游覽器前綴。到現(xiàn)在為止，CSS漸變 有五種 不同的游覽器前綴。

-ms-linear-gradient and -ms-radial-gradient for Internet Explorer 10+

-moz-linear-gradient and -moz-radial-gradient for Firefox 3.6+

-o-linear-gradient and -o-radial-gradient for Opera 11.10+

-webkit-linear-gradient and -webkit-radial-gradient for Safari 5+ and Chrome

-webkit-gradient for Safari 4+ and Chrome (aka "Old WebKit")

想跨游覽器實(shí)現(xiàn)一個(gè)簡(jiǎn)單的雙色漸變，須要代碼如下:

background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */

在如此多的前綴里，編碼中很容易忘記 少編寫其中的一種或多個(gè)漸變前綴。

規(guī)則 ID: gradients

此規(guī)則在 使用漸變時(shí) 只定義部分游覽器前綴 而未定義所有游覽器前綴時(shí)，提示警告。

以下示例將提示警告:

/* Missing -moz, -ms, and -o */
.mybox {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

/* Missing old and new -webkit */
.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); 
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

以下示例 不會(huì)提示警告:

.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); 
}

一直以來(lái)，開(kāi)發(fā)者對(duì) ID選擇器 感情甚好、情有獨(dú)鐘。但是呢，ID選擇器也多多少少有些副作用：它完全是唯一的，因此不能復(fù)用。你可在頁(yè)面中，對(duì)所有元素都使用ID選擇器，但因此，你會(huì)失去CSS其它方面帶來(lái)的諸多益處。

CSS的好處之一就是可在多處 復(fù)用樣式規(guī)則。當(dāng)你開(kāi)始使用ID選擇器時(shí)，就不經(jīng)意間將樣式局限在了單個(gè)元素上。假設(shè)你的代碼如下:

#header a {
    color: black;
}

這個(gè)樣式只會(huì)在ID為header 下的a標(biāo)簽 起效。但假設(shè)現(xiàn)在，你想在頁(yè)面中的另外一個(gè)章節(jié)也使用同樣的樣式，估計(jì)你只能重新再定義一個(gè)類來(lái)實(shí)現(xiàn)效果，如下:

#header a,
.callout a {
    color: black;
}

一旦你明白此處的含義，你怕是只會(huì)使用類定義而不會(huì)聲明ID選擇器了。

.callout a {
    color: black;
}

最終，你可能將不在需要，也不想再使用ID選擇器，而使用 類選擇器 取代其效果。棄用ID選擇器后，你將解鎖釋放CSS復(fù)用的最大能力。

規(guī)則 ID: ids

此規(guī)則意在 提示 不使用ID選擇器從而提高代碼復(fù)用和可維護(hù)性。任何一處的ID選擇器 將提示 警告。

以下示例將 提示警告:

#mybox {
    display: block;
}

.mybox #go {
    color: red;
}

@import命令用于在CSS文件中 引用其它的CSS文件，例子如下:

@import url(more.css);
@import url(andmore.css);

a {
    color: black;
}

此代碼在開(kāi)始位置 引用了另外兩個(gè)樣式表。當(dāng)游覽器解析此代碼時(shí)，會(huì)在每個(gè)@import后開(kāi)始下載指定的文件，而 停止執(zhí)行后面的代碼。也就是說(shuō) 在@import指定的文件未下載完成前，游覽器不會(huì)同時(shí)下載其它的樣式文件，總而失去了 并行下載CSS的優(yōu)勢(shì)。

有兩種替代@import的方式:

使用構(gòu)建工具，在部署前，就將需要合并的CSS文件串聯(lián)至一起。

使用多個(gè)標(biāo)簽來(lái)引入你需要的CSS樣式。引入是支持并行下載的。

規(guī)則 ID: import

此規(guī)則 在使用@import時(shí) 提示警告。

以下示例將提示警告:

@import url(foo.css);

!important注釋使用在 人為指定強(qiáng)調(diào) 的屬性上。這往往意味著 這個(gè)待強(qiáng)調(diào)的特殊屬性 已在整個(gè)CSS文件中失控(選擇器不能正常工作),亦或 需要重構(gòu)代碼了。!important在CSS中出現(xiàn)的次數(shù)越多，越突顯出 開(kāi)發(fā)者在頁(yè)面樣式上的不少問(wèn)題。

規(guī)則 ID: important

此規(guī)則意在 確保代碼的特指度工作正常。為此,一旦出現(xiàn) !important 將提示警告。

以下示例將提示警告:

.mybox {
    color: red !important;
}

可供CSS使用的屬性變得越來(lái)越多，那么 在不檢測(cè)屬性名稱是否正確時(shí)，我們就很容易將其拼寫錯(cuò)誤。

規(guī)則 ID: known-properties

此規(guī)則將檢查每個(gè)使用的屬性名稱 以確保其是已知的屬性。支持檢查的屬性 是CSS解析器中的一部分，規(guī)則使用CSS解析器的信息來(lái)驗(yàn)證 屬性 是否為已知。支持檢查的屬性 將隨CSS的開(kāi)發(fā)完善而需要更新，雖然現(xiàn)在不是最終版，但畢竟是個(gè)避免錯(cuò)誤的 好的開(kāi)始。此規(guī)則就是在出現(xiàn)拼寫錯(cuò)誤時(shí) 提示警告。

所有游覽器前綴屬性 (以 - 開(kāi)始) 將被忽略，因?yàn)榍熬Y 會(huì)添加至 游覽器各自版本的屬性上，而這些屬性沒(méi)有一個(gè)參考標(biāo)準(zhǔn)。此規(guī)則將不同于傳統(tǒng)的CSS驗(yàn)證，傳統(tǒng)的CSS驗(yàn)證在 游覽器前綴屬性出現(xiàn)時(shí) 也會(huì)提示警告。

此規(guī)則不僅會(huì)檢查 屬性名稱，也會(huì)檢查屬性 對(duì)應(yīng)的值是否與其匹配。但現(xiàn)在，只能檢查大部分而不是所有的屬性對(duì)應(yīng)的值 的合法性。

以下示例將提示警告:

/* clr isn"t a known property */
a {
    clr: red;
}

/* "foo" isn"t a valid color */
a {
    color: foo;
}

以下示例將 不提示警告:

/* -moz- is a vendor prefix, so ignore */
a {
    -moz-foo: bar;
}

outline屬性用于在元素的四周定義邊框。不同于border屬性,outline不會(huì)改變?cè)氐拇笮∨c布局。正因如此，游覽器常用outline來(lái)突出 激活狀態(tài)的元素。當(dāng)元素被選中為焦點(diǎn)時(shí)，在IE和火狐(Firefox)游覽器中，outline所渲染的元素 是單像素的點(diǎn)狀線條。

焦點(diǎn)輪廓，能直觀的提醒用戶當(dāng)前頁(yè)面獲得焦點(diǎn)的元素，因此 在輔助提示上的重要性不言而喻。對(duì)于純鍵盤用戶而言，如果當(dāng)前焦點(diǎn)元素沒(méi)有明顯的視效指明，就幾乎不可能追蹤到頁(yè)面中所選的元素。不幸的是，默認(rèn)樣式下的焦點(diǎn)輪廓，顏值有些低，不美觀，以至 在代碼中將其移除了,如下:

a {
    outline: none;
}

或

a {
    outline: 0;
}

以上兩種方式都將移除元素的外輪廓，即便在元素獲得焦點(diǎn)時(shí)，外輪廓也不會(huì)出現(xiàn)。這對(duì)于 輔助提示 是不友好的。

當(dāng)然，你可以給用戶提供 自定義焦點(diǎn)效果，從而替換默認(rèn)的點(diǎn)狀邊框。為此，移除掉outline,添加對(duì)應(yīng)的改善效果，就很人性化很合理了。那么,好的解決方式之一就是使用 :focus 來(lái)提供新的樣式 的同時(shí)，重設(shè)outline,例子如下:

a:focus {
    border: 1px solid red;
    outline: none;
}

規(guī)則 ID: outline-none

此規(guī)則意在 確保純鍵盤用戶 獲得焦點(diǎn)提示。為此,規(guī)則發(fā)現(xiàn)以下情況 提示警告:

outline: none 或 outline: 0 在選擇器中使用,但未指定 :focus

outline: none 或 outline: 0 在選擇器中使用,雖指定:focus但其未定義 替換屬性

以下示例將 提示警告:

/* no :focus */
a {
    outline: none;
}

/* no :focus */
a {
    outline: 0;
}

/* :focus but missing a replacement treatment */
a:focus {
    outline: 0;
}

以下示例 不會(huì)提示警告:

/* :focus with outline: 0 and provides replacement treatment */
a:focus {
    border: 1px solid red;
    outline: 0;
}

編寫如li.active選擇器是不必要的，除非 不同的元素名稱，在使用相同類名下 需要展示不同的樣式。多數(shù)情況下，在選擇器中移除元素名稱更為妥當(dāng)，不僅減小了CSS文件的體積，同時(shí)也提升了選擇器的性能(不須再次匹配元素)。

移除元素名稱也同時(shí)降低了CSS與HTML的耦合度，允許你改變?cè)厥褂玫臉邮筋?，而不需要更新CSS樣式文件。

規(guī)則 ID: overqualified-elements

此規(guī)則意在 移除冗余不必的選擇器總而減少數(shù)據(jù)大小。為此，警告出現(xiàn)在 元素名稱與類名同時(shí)使用時(shí)(如 li.active)。如果，兩個(gè)不同的元素使用了相同的類名(如 li.active p.active) 將 不會(huì)提示警告。

以下示例 提示警告:

div.mybox {
    color: red;   
}

.mybox li.active {
    background: red;
}

以下示例將 不提示警告:

/* Two different elements in different rules with the same class */
li.active {
    color: red;
}

p.active {
    color: green;
}

標(biāo)題元素(h1-h6) 應(yīng)定義為頂級(jí)樣式 且 不能在頁(yè)面其它區(qū)域 定義其特定樣式。標(biāo)題樣式 應(yīng)以面向?qū)ο蟮乃季S來(lái)考慮設(shè)計(jì)，并且 在整個(gè)站點(diǎn)中的展示效果應(yīng)當(dāng)保持一直。這種方式允許在站點(diǎn)中復(fù)用你的樣式 從而利于站點(diǎn)的統(tǒng)一展示，健壯代碼與維護(hù)。舉個(gè)例子，以下代碼為 過(guò)度定義標(biāo)題:

.foo h1 {
    font-size: 110%;
}

規(guī)則 ID: qualified-headings

此規(guī)則意在 找出 定義了標(biāo)題的規(guī)則，因此 警告將出現(xiàn)在 樣式規(guī)則里將 標(biāo)題元素 作為最后一個(gè)選擇器。

以下示例 提示警告:

/* qualified heading */
.box h3 {
    font-weight: normal;
}

/* qualified heading */
.item:hover h3 {
    font-weight: bold;
}

以下示例 不提示警告:

/* Not qualified */
h3 {
    font-weight: normal;
}

CSS3增加了復(fù)雜的屬性選擇器 使得我們可以根據(jù)表達(dá)式來(lái)匹配 屬性值。這系列的選擇器有著性能的影響，表達(dá)式匹配與簡(jiǎn)單的類名匹配相比 速度要慢。在諸多場(chǎng)景里，是使用一個(gè)不確定值的選擇器 還是 簡(jiǎn)單的給元素增加一個(gè)類名選擇器 還在討論中。這里有幾種需要注意的屬性選擇器。

如屬性選擇器僅包含屬性本身，則此屬性選擇器實(shí)際上沒(méi)有性能問(wèn)題。舉個(gè)例子，以下選擇器 僅匹配 元素定義了href屬性:

//OK
a[href] {
    color: red;
}

如屬性選擇器使用確定的值作為匹配條件，則此屬性選擇器也是沒(méi)問(wèn)題的。舉個(gè)例子,以下選擇器 僅匹配元素的rel屬性值為 "external" :

//OK
a[rel=external] {
    color: blue;
}

a[href*=yahoo.com] {
    color: green;
}

此選擇器匹配 任何元素的href屬性值中 有字符串 "yahoo.com"的條件。如下示例將匹配此條件:

Yahoo!

Redirect to Yahoo!

Login to Yahoo!

注意 不必?fù)?dān)心字符串兩邊是否有空格,因?yàn)橹蛔霾糠制ヅ洹?/p>

開(kāi)始為

接著需要"避免使用"的選擇器是 開(kāi)始為匹配。選擇器使用^=操作符來(lái)匹配 屬性值以給定的字符串開(kāi)頭 元素。例子如下:

a[rel^=ext] {
    color: red;
}

此規(guī)則將匹配如下示例:

Example

Extra! Extra!

Extreme

所有的選擇器只關(guān)注 字符串"ext"是否在rel屬性值的起始位置。

結(jié)尾為

接著需要"避免使用"的選擇器是 結(jié)尾為匹配。選擇器使用$=操作符來(lái)匹配 屬性值以給定的字符串結(jié)尾 元素。例子如下:

a[href$=.html] {
    color: blue;
}

此規(guī)則匹配所有 元素 以 其href屬性值為.html結(jié)尾的條件。以下示例將匹配:

Home

Example

單詞匹配

檢查被空格間隔開(kāi)的屬性值,是更為復(fù)雜的選擇器。選擇器使用 ~=操作符 來(lái)匹配 屬性值必須包涵給定的單詞,換句話說(shuō),屬性值匹配給定單詞的同時(shí),屬性值本身還須被空格所間隔開(kāi)。示例如下:

a[rel~=external] {
    color: red;
}

此規(guī)則將匹配如下例子:

Example

Example

Example

Example

包涵破折號(hào)

最后一個(gè)"問(wèn)題"選擇器是 檢查屬性值中的字符串中是否被破折號(hào)分隔。|=用來(lái)找字符串的內(nèi)部是否有xxx-yyy-zzz格式的字符串,例子如下:

a[data-info|=name] {
    color: red;
}

它將匹配如下示例:

Info

Info

Info

性能問(wèn)題

以上所有這些復(fù)雜的屬性選擇器 都須通過(guò)一遍又一遍的計(jì)算來(lái)匹配對(duì)應(yīng)屬性值,從而確保最終的顯示效果正確。為此,CSS需要開(kāi)銷更多的時(shí)間,來(lái)計(jì)算整個(gè)頁(yè)面的顯示效果。

規(guī)則 ID:regex-selectors

此規(guī)則意在 標(biāo)識(shí)出 存在影響性能問(wèn)題的潛在選擇器。為此,規(guī)則在發(fā)現(xiàn)選擇器使用 *=,|=,^=,$=,~=提示警告。

以下示例 提示警告:

.mybox[class~=xxx]{
    color: red;
}

.mybox[class^=xxx]{
    color: red;
}

.mybox[class|=xxx]{
    color: red;
}

.mybox[class$=xxx]{
    color: red;
}

.mybox[class*=xxx]{
    color: red;
}

以下示例 不會(huì)提示警告:

.mybox[class=xxx]{
    color: red;
}

.mybox[class]{
    color: red;
}

有時(shí)咱們編寫一條規(guī)則時(shí),使用簡(jiǎn)寫來(lái)代替多屬性定義會(huì)更好,例如:

.mybox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

此四屬性可以組合成一個(gè)margin屬性,如下:

.mybox {
    margin: 20px 10px 30px;
}

使用簡(jiǎn)寫屬性可以幫助減少CSS體積的大小。

規(guī)則 ID: shorthand

此規(guī)則意在 檢索出可簡(jiǎn)寫的屬性來(lái)減少文件體積。因此,在如下示例中 提示警告:

當(dāng)margin-left,margin-right,margin-top,margin-bottom在同一規(guī)則中使用時(shí)。

當(dāng)padding-left,padding-right,padding-top,padding-bottom在同一規(guī)則中使用的。

以下示例 提示警告:

.mybox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.mybox {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
}

以下示例 不提示警告:

/* only two margin properties*/
.mybox {
    margin-left: 10px;
    margin-right: 10px;

}

/* only two padding properties */
.mybox {
    padding-right: 10px;
    padding-top: 20px;
}

星號(hào)前綴是有名(也可能無(wú)名)的技巧，僅用來(lái)在IE8以前的版本上指定CSS屬性。通過(guò)在屬性名前加上星號(hào)，老版IE游覽器解析時(shí)，將當(dāng)此星號(hào)不存在，而其它游覽器則直接忽略此屬性。例子如下:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
    *width: 200px;
}

在此示例中，IE7及更早版本會(huì)將*width屬性當(dāng)作width解析，因此實(shí)際值為200px；其它游覽器則忽略跳過(guò)此屬性，使用的實(shí)際值為100px。

星號(hào)前綴是依賴?yán)习鍵E的CSS解析器缺陷，也因此，并不建議使用它。

規(guī)則 ID: star-property-hack

此規(guī)則意在 消除在CSS中使用星號(hào)前綴.因此,在發(fā)現(xiàn)屬性名前使用星號(hào)時(shí)提示警告。

以下示例 提示警告:

.mybox {
    border: 1px solid black;
    *width: 100px;
}

文本負(fù)縮進(jìn)通常當(dāng)作輔助的目的，來(lái)隱藏在屏幕上的文字。使用場(chǎng)景之一就是作為圖像替換技術(shù)，使用文本負(fù)縮進(jìn)，可確保屏幕閱讀器在文本沒(méi)有顯示在屏幕中時(shí)也能讀取其數(shù)據(jù)。使用visibility:hidden或display:none會(huì)使得屏幕閱讀器略過(guò)文本信息，因此，運(yùn)用文本負(fù)縮進(jìn)被視為更好的輔助處理方式。

此技巧通常使用很大的負(fù)單位數(shù)值，如-999px或-9999px，如下:

.mybox {
    background: url(bg.png) no-repeat;
    text-indent: -9999px;
}

此帶有技巧性的縮進(jìn)允許 背景圖片展示給普通游覽用戶的同時(shí)，也確保了屏幕閱讀器能順利解析內(nèi)聯(lián)的文本信息。

當(dāng)文本負(fù)縮進(jìn)使用在橫向視圖頁(yè)面時(shí)，會(huì)引起一定的麻煩，因?yàn)闀?huì)出現(xiàn)一個(gè)很長(zhǎng)的橫向滾動(dòng)條。此問(wèn)題可以通過(guò)添加direction:ltr來(lái)解決，如下:

.mybox {
    background: url(bg.png) no-repeat;
    direction: ltr;
    text-indent: -9999px;
}

關(guān)于文本負(fù)縮進(jìn)是否會(huì)影響頁(yè)面搜索排名，出現(xiàn)了各種不同的聲音。 Anecdotal accounts 覺(jué)得Google會(huì)把文本負(fù)縮進(jìn)當(dāng)作垃圾廣告技術(shù)來(lái)處理，但是這并未得到驗(yàn)證。

規(guī)則 ID: text-indent

此規(guī)則意在 找出CSS代碼中使用text-indent的潛在問(wèn)題。警告出現(xiàn)在 text-indent的值為-99或類似(如，-100，-999)，而沒(méi)有使用direction:ltr時(shí)。數(shù)值的單位不會(huì)考慮在其中，因?yàn)?b>px，em或其它單位 會(huì)看作等同。

以下示例 提示警告:

/* missing direction */
.mybox {
    text-indent: -999px;
}

/* missing direction */
.mybox {
    text-indent: -999em;
}

/* direction is rtl */
.mybox {
    direction: rtl;
    text-indent: -999em;
}

以下示例 不會(huì)提示警告:

/* direction used */
.mybox {
    direction: ltr;
    text-indent: -999em;
}

/* Not obviously used to hide text */
.mybox {
    text-indent: -1em;
}

下劃線前綴 是僅對(duì)IE7以前版本的游覽器執(zhí)行CSS屬性的一種技術(shù)手段。通過(guò)在屬性名前添加下劃線，老版IE游覽器將省略下劃線，而其它游覽器則直接忽略此屬性。示例如下:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
    _width: 200px;
}

在這個(gè)例子中，IE6及以前游覽器把_width屬性 當(dāng)width看待，所以實(shí)際寬度為200px;其它游覽器則跳過(guò)此屬性，因而實(shí)際值為100px。

下劃線前綴是依賴IE游覽器，CSS解析的缺陷 實(shí)現(xiàn)其效果，正因如此，非特殊情況并不推薦使用。

規(guī)則 ID: underscore-property-hack

此規(guī)則意在 消除在CSS中使用下劃線前綴。因此，在屬性名前出現(xiàn)下劃線 將提示警告:

.mybox {
    border: 1px solid black;
    _width: 100px;
}

面相對(duì)象CSS (OOCSS) 要求定義可重用的對(duì)象，以確保在站點(diǎn)的任何位置使用時(shí)，都有著相同的顯示效果。標(biāo)題元素 (h1 - h6) 應(yīng)當(dāng)作為內(nèi)建對(duì)象考慮，使其不管在何處使用均為同樣的顯示效果。因此，每個(gè)標(biāo)題元素，因當(dāng)只被規(guī)則定義一次。多處規(guī)則定義相同的標(biāo)題顯示效果，會(huì)使其很難使用，因?yàn)?標(biāo)題樣式會(huì)因?yàn)樯舷挛沫h(huán)境不一致而出現(xiàn)不同展示效果。

規(guī)則 ID:unique-headings

此規(guī)則意在 標(biāo)識(shí)出重復(fù)定義標(biāo)題元素的聲明。因此，警告出現(xiàn)在 對(duì)同一標(biāo)題 定義了多個(gè)規(guī)則時(shí)。

以下示例提示警告:

/* Two rules for h3 */
h3 {
    font-weight: normal;
}

.box h3 {
    font-weight: bold;
}

以下示例 不提示警告:

/* :hover doesn"t count */
h3 {
    font-weight: normal;
}

h3:hover {
    font-weight: bold;
}

通用選擇器 (*) 匹配所有元素。盡管每次都能很方便的選擇一組元素，但如果將其作為選擇器的核心部分(選擇器位置的最右側(cè)) 則會(huì)造成性能問(wèn)題。舉個(gè)例子，如下的規(guī)則形式應(yīng)該避免使用:

.mybox * {
    background: #fff;
    color: #000;
    background: rgba(255， 255， 255， 0.5);
}

游覽器按照從右至左的順序解析選擇器，因此這個(gè)規(guī)則將首先匹配文檔中的所有元素。然后，逐一檢測(cè)這些元素是否匹配下級(jí)規(guī)則，即是否擁有祖先樣式mybox。如果包涵 * 的選擇器越復(fù)雜，其解析的時(shí)間越久。正是因?yàn)榇嗽?，推薦在使用 通用選擇器時(shí)，避免將其放置選擇器的最右側(cè)。

規(guī)則 ID: universal-selector

此規(guī)則意在 標(biāo)示出 因?yàn)槭褂猛ㄓ眠x擇器而引起緩慢的樣式規(guī)則。因此，在發(fā)現(xiàn)通用選擇器 出現(xiàn)在 選擇器的最右側(cè)時(shí) 提示警告。

以下示例提示警告:

* {
    color: red;
}

.selected * {
    color: red;
}

以下示例 不提示警告:

/* universal selector is not key */
.selected * a {
    color: red;
}

未定義屬性選擇器，如 [type=text]，首先匹配所有元素，然后檢查各屬性。這意味著 未定義選擇器 和 通用選擇器(*)一樣都有著相同性能特點(diǎn)。和通用選擇器相似，未定義屬性選擇器作為 選擇器的核心部分(選擇器最右側(cè))時(shí)，會(huì)造成性能問(wèn)題。舉個(gè)例子，如下規(guī)則定義 應(yīng)當(dāng)避免使用:

.mybox [type=text] {
    background: #fff;
    color: #000;
    background: rgba(255， 255， 255， 0.5);
}

游覽器以 從右至左的方式解析選擇器，因而，此規(guī)則首先匹配文檔中的所有元素，然后逐一檢查對(duì)應(yīng)屬性。之后，再檢查這些元素是否匹配下一級(jí)條件，即是否有祖先樣式類 mybox。包涵未定義屬性選擇器的規(guī)則越復(fù)雜，判斷的時(shí)間開(kāi)銷越久。正因如此，在使用 未定義屬性選擇器時(shí)，應(yīng)避免將其放置最右側(cè)。

規(guī)則 ID: unqualified-attributes

此規(guī)則意在 標(biāo)示出 因使用未定義屬性選擇器而造成解析緩慢的規(guī)則。因此，在未定義屬性選擇器出現(xiàn)在規(guī)則最右側(cè)時(shí)，提示警告。

以下示例提示警告:

[type=text] {
    color: red;
}

.selected [type=text] {
    color: red;
}

以下示例 不提示警告:

/* unqualified attribute selector is not key */
.selected [type=text] a {
    color: red;
}

游覽器前綴屬性是 各游覽器提供商在標(biāo)準(zhǔn)樣式還未建成時(shí)，提供實(shí)驗(yàn)性 新增CSS功能，而創(chuàng)建的。其允許開(kāi)發(fā)者和游覽器提供商在之后 新增屬性還未確定定稿時(shí)，發(fā)現(xiàn)潛在的缺陷和跨游覽器兼容性問(wèn)題。標(biāo)準(zhǔn)版屬性通常(但也不總是)與游覽器前綴版，有著相同的名字和語(yǔ)構(gòu)，如果有兩種或以上相同的游覽器前綴屬性 語(yǔ)構(gòu)相似，則標(biāo)準(zhǔn)版屬性與其語(yǔ)構(gòu)保持一致。

當(dāng)使用游覽器前綴屬性 如-moz-border-radius，你應(yīng)當(dāng)同時(shí)編寫標(biāo)準(zhǔn)屬性，以保障今后的兼容性。標(biāo)準(zhǔn)屬性編寫應(yīng)在 游覽器前綴屬性之后，以確保 標(biāo)準(zhǔn)屬性能被游覽器識(shí)別使用到，如下:

.mybox {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

將標(biāo)準(zhǔn)屬性放置游覽器前綴屬性之后 是確保一旦標(biāo)準(zhǔn)屬性完全實(shí)行時(shí)，你的CSS代碼能正常運(yùn)轉(zhuǎn)的最好方式(接著，你就可找個(gè)喝茶的時(shí)間，把以往的游覽器前綴屬性給刪除)。

規(guī)則 ID: vendor-prefix

此規(guī)則意在確保 不論何時(shí)使用游覽器前綴屬性時(shí)，與其匹配的標(biāo)準(zhǔn)屬性均同時(shí)編碼。因此，規(guī)則在以下條件時(shí)，提示警告:

游覽器前綴屬性之后，沒(méi)有跟隨與其匹配的標(biāo)準(zhǔn)屬性。

與游覽器前綴屬性匹配的標(biāo)準(zhǔn)屬性，出現(xiàn)在前綴屬性之前。

以下示例 提示警告:

/* missing standard property */
.mybox {
    -moz-border-radius: 5px;
}

/* standard property should come after vendor-prefixed property */
.mybox {
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

以下示例 不提示警告:

/* both vendor-prefix and standard property */
.mybox {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

在任何場(chǎng)景下，不論是長(zhǎng)度單位還是百分比，使用 0 值而不指定單位，都是允許且正常運(yùn)行的。在 0px，0em，0%，或其它 0值單位之間，均無(wú)任何差別。單位在這里并不重要，因?yàn)橹当旧?都會(huì)是 零。CSS允許咱們省略 零值的單位，并依舊視為合法的CSS。

推薦 移除所有長(zhǎng)度為 零后面的單位;因?yàn)樵谟斡[器中規(guī)定的單位并不會(huì)起效，所以在安心移除的同時(shí)，還減小了文件體積。

規(guī)則 ID: zero-units

此規(guī)則意在 標(biāo)示出 長(zhǎng)度為零 且?guī)в袉挝坏那樾?。因此，在發(fā)現(xiàn) 0 后跟隨了單位或百分比時(shí)，提示警告。

以下示例 提示警告:

.mybox {
    margin: 0px;
}

.mybox {
    width: 0%;
}

.mybox {
    padding: 10px 0px;
}

以下示例 不提示警告:

.mybox {
    margin: 0;
}

.mybox {
    padding: 10px 0;
}