摘要：以下為正確示例規則說明與示例規則此規則意在防止在及早期游覽器上因為解析字體鏈接的而產生的錯誤。如下這里類指明了背景圖片，其它類則指明背景圖片的位置。

文章為csslint中文版譯文，點擊原文可查看英文版，如遇到翻譯錯誤或錯別字啥的，請留言指出~ 
規則列表如下

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規范中允許使用，但在IE6即更早版本中可能就不好使了。IE僅會命中.bar選擇器，也就是說你的選擇器不會按你的套路出牌，埋下游覽器樣式兼容性問題的種子。(不用IE6的 放心大膽的使用吧)

通常來說，基于單類來定義一個樣式要比多類定義更好。可以瞅瞅想想下面的例子：

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

選擇器.foo.bar的規則，可以用一個新類進行重寫:

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

那么這個新類 baz 必須添加至原有的HTML元素上。這樣更利于維護，因為.baz 規則，此刻就可以被復用了，而.foo.bar規則只能被用在前一種固有的情況下。

規則說明與示例

規則 ID: adjoining-classes

此規則意在指出 使用相鄰類時，在IE6即更早版本時會出現匹配失敗的情況。

以下例子將會出現警告:

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

以下例子將不會出現警告:

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

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

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

新手可能會覺得擁有mybox類的元素寬度為100像素。但實際上呢，寬度是112像素，這是因為盒子模型默認為內容盒子，寬度最終由 內容、內邊距、邊框相加而得。如果開發人員不清楚盒子模型，那對此例子的寬度就會不一致。

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

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

現在，這個擁有mybox類的元素，實際寬度就為100像素了,內邊距與邊框 將占據其中的空間，剩下的88像素將是內容的寬度。

規則 ID: box-model

此規則 意在消除潛在的盒子模型大小問題。因此，規則將在以下情況出現警告:

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

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

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

以下的例子將會出現警告:

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

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

以下的例子將 不會 出現警告:

/* 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屬性用來定義 邊框，內邊距，是如何相互影響寬度和高度的。此屬性默認值為content-box，意思是 寬和高是由元素內容本身決定，然后 內邊距與邊框 再將內容包裹上。請看以下例子:

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

這個盒子的實際寬度為112像素。這是因為內容將占據100像素的寬度，然后內容兩側分別加上5像素的內邊距，接著兩側再加上1像素的邊框。

當你將box-sizing的屬性值改變至border-box時，計算方式則不同了:

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

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

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

規則 ID: box-sizing

此規則在box-sizing屬性使用時會出現警告。其含義即 提示開發者 此屬性在IE6 IE7或更早期的游覽器上得不到支持。

以下示例將會出現警告:

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

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

當使用@font-face來跨游覽器聲明 多字體類型時，你會發現在老版IE中出現404錯誤，這是因為老版IE在解析字體聲明時的缺陷(BUG)。來~ 舉個例子:

@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上將會出現404錯誤。解決辦法是在第一個字體鏈接后加上 ? (問號)，接下來 IE 會把 余下的屬性值看作查詢字符串。以下為正確示例:

@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");
}

規則 ID: bulletproof-font-face

此規則意在防止 在IE8及早期游覽器上 因為解析字體鏈接的BUG而產生的404錯誤。

以下示例會出現警告:

@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");
}

以下示例將 不會 出現警告:

@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");
}

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

實驗性的CSS屬性，通常需要添加游覽器前綴，方能實現其效果。當然，等到標準的最終統一與建立就不需要再添加前綴了。許多CSS3屬性對應都有多種前綴，包括 Firefox(-moz)，Safari/Chrome(-webkit)，Opera(-o)，和 Internet Explorer(-ms)。因為前綴過多，我們在使用新屬性時就很容易忘記 添加游覽器前綴。

以下屬性建議追加多內核前綴:

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屬性增加對應的游覽器前綴就非常重要了。

規則 ID: compatible-vendor-prefixes

此規則將在 缺失游覽器前綴的屬性時 出現警告。支持的屬性已在上方列表中羅列。

以下示例將會出現警告:

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

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

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

.foo {
}

許多時候呢，空規則的出現是因為 重構了樣式而忘記刪除冗余代碼造成的。消除空規則 縮小了樣式文件大小 與 精簡了待游覽器處理的樣式信息。

規則 ID: empty-rules

此規則 在CSS樣式中發現為空規則時 出現警告。以下示例將會出現警告:

.mybox { }

.mybox {

}

.mybox { /* a comment */ }

.mybox {
    /* a comment */
}

盡管你可以在CSS中定義任意的組合規則，但是呢，其中有些規則會因為 元素設置了display屬性，而忽略你所設置的規則。這會導致你的CSS文件中出現臟代碼，同時也誤解了規則理應如何運轉的。

當 display:inline時, width,height,margin-top,margin-bottom,和float屬性的設置 將不會起到作用，因為 內聯(inline)元素不是一個規則的盒子模型，也就無從設置這些屬性。而 margin-left和margin-right依舊能起效是為了保證 縮進 的目的，其它的外邊距(margin) 設置則起不到效果。float屬性有時會用作修復 IE6 double-margin bug.

其它基于display的情形有:

display:inline-block 不應與 float 同時使用。

display:block 不應與 vertical-align 同時使用。

display:table-* 不應與 margin" 或 float` 同時使用。

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

規則 ID: display-property-grouping

此規則 將標識出 與display屬性同時使用 而不起效的屬性。其目的是使CSS文件更精簡，更清晰而無多余代碼。因此，檢測出以下代碼時，提示警告:

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

display:inline-block 與 float 同時使用。

display:block 與 vertical-align 同時使用。

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

以下示例將提示警告:

/* 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;
}

以下示例將 不會 提示警告:

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

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

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

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

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

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

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

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

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

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

規則 ID: duplicate-background-images

此規則意在 確保同一鏈接地址不會在樣式層疊表中重復。

以下示例將會提示警告:

/* 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;
}

以下示例將 不會提示警告:

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

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

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

在早先網頁開發中，相同的CSS屬性出現了兩次則毫無疑問是有問題的，特別是 如果有兩個不同的值，如下:

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

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

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

此處重復很明顯是有意為之。開發者想在支持RGBA的游覽器上使用其效果，而不支持的游覽器則使用傳統的純色。

規則 ID: duplicate-properties

此規則 意在找出重復定義的CSS屬性代碼。警告將出現在:

屬性出現兩次且為相同的值。

屬性出現兩次且被至少一個其它的屬性所隔開。

以下示例將會提示警告:

/* 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;
}

以下示例將 不會提示警告:

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

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

這個規則源于 游覽器的CSS解析器 會略過不識別的名稱或值。像IE8或更早的這類老版游覽器，不識別 rgba(),hsl(),hsla(),其結果就是會忽略定義的屬性。請看如下代碼:

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

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

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

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

規則 ID: fallback-colors

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

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

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

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

以下示例將會提示警告:

/* 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;
}

以下示例將 不會提示警告:

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

float屬性 是CSS中實現多列布局 廣受歡迎的方式。在項目中，越來越多的float元素被用來創建不同的 頁面布局或站點布局。如果此時改變布局，則會使得CSS代碼十分脆弱，難以維護。

通常，使用很多的float意味 你的項目將得益于網格系統。CSS網格系統使用CSS類來實現標準的多列布局，一些熱門的網格系統有:

960gs

Blueprint

OOCSS Grids

YUI Grids

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

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

規則 ID: floats

此規則 意在監察使用float次數從而減少代碼復雜度。當float出現 超過10次時，將提示警告。使用float頻率超過10次，意味著代碼中有許多 多列布局的定義，那么通過引用網格系統框架，將更利于你的代碼維護。

網絡字體越來越流行，@font-face使用頻率也隨之增加。但是，當字體文件過大，以及部分游覽器在下載字體文件時,會阻塞渲染，就帶來了顯示性能的隱患。出于這個原因，CSSlint將在樣式表中監測 出現超過 5次 網絡字體引用時，提示警告。

一個利于維護的站點，通常都有通用的字體集。這些字體大小，往往定義在一個代表其含義的抽象類當中，以便運用到站點的各個使用場景。如果未抽取出公用類，會導致開發者頻繁的使用font-size,來使元素大小按預期顯示。這就帶來了一個問題，當設計的字體大小改變后，我們需要改變樣式中所有設計的字體大小。而抽取出類時，只用改變類中定義的大小即可做到全局調整。

你可以創建一些標準字體大小類，如:

.small {
    font-size: 8px;
}

.medium {
    font-size: 11px;
}

.large {
    font-size: 14px;
}

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

規則 ID:font-sizes

此規則意在強調 把過多字體大小的定義，轉而至 統一定義為一個類的好處。規則 在使用 font-size 超過10次時 提示警告。

截止2011年12月份，CSS漸變的標準定義還未定稿，也就是說 想跨游覽器實現色彩漸變，需要使用很多不同的游覽器前綴。到現在為止，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")

想跨游覽器實現一個簡單的雙色漸變，須要代碼如下:

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+ */

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

規則 ID: gradients

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

以下示例將提示警告:

/* 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%);
}

以下示例 不會提示警告:

.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%); 
}

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

CSS的好處之一就是可在多處 復用樣式規則。當你開始使用ID選擇器時，就不經意間將樣式局限在了單個元素上。假設你的代碼如下:

#header a {
    color: black;
}

這個樣式只會在ID為header 下的a標簽 起效。但假設現在，你想在頁面中的另外一個章節也使用同樣的樣式，估計你只能重新再定義一個類來實現效果，如下:

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

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

.callout a {
    color: black;
}

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

規則 ID: ids

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

以下示例將 提示警告:

#mybox {
    display: block;
}

.mybox #go {
    color: red;
}

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

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

a {
    color: black;
}

此代碼在開始位置 引用了另外兩個樣式表。當游覽器解析此代碼時，會在每個@import后開始下載指定的文件，而 停止執行后面的代碼。也就是說 在@import指定的文件未下載完成前，游覽器不會同時下載其它的樣式文件，總而失去了 并行下載CSS的優勢。

有兩種替代@import的方式:

使用構建工具，在部署前，就將需要合并的CSS文件串聯至一起。

使用多個標簽來引入你需要的CSS樣式。引入是支持并行下載的。

規則 ID: import

此規則 在使用@import時 提示警告。

以下示例將提示警告:

@import url(foo.css);

!important注釋使用在 人為指定強調 的屬性上。這往往意味著 這個待強調的特殊屬性 已在整個CSS文件中失控(選擇器不能正常工作),亦或 需要重構代碼了。!important在CSS中出現的次數越多，越突顯出 開發者在頁面樣式上的不少問題。

規則 ID: important

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

以下示例將提示警告:

.mybox {
    color: red !important;
}

可供CSS使用的屬性變得越來越多，那么 在不檢測屬性名稱是否正確時，我們就很容易將其拼寫錯誤。

規則 ID: known-properties

此規則將檢查每個使用的屬性名稱 以確保其是已知的屬性。支持檢查的屬性 是CSS解析器中的一部分，規則使用CSS解析器的信息來驗證 屬性 是否為已知。支持檢查的屬性 將隨CSS的開發完善而需要更新，雖然現在不是最終版，但畢竟是個避免錯誤的 好的開始。此規則就是在出現拼寫錯誤時 提示警告。

所有游覽器前綴屬性 (以 - 開始) 將被忽略，因為前綴 會添加至 游覽器各自版本的屬性上，而這些屬性沒有一個參考標準。此規則將不同于傳統的CSS驗證，傳統的CSS驗證在 游覽器前綴屬性出現時 也會提示警告。

此規則不僅會檢查 屬性名稱，也會檢查屬性 對應的值是否與其匹配。但現在，只能檢查大部分而不是所有的屬性對應的值 的合法性。

以下示例將提示警告:

/* 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不會改變元素的大小與布局。正因如此，游覽器常用outline來突出 激活狀態的元素。當元素被選中為焦點時，在IE和火狐(Firefox)游覽器中，outline所渲染的元素 是單像素的點狀線條。

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

a {
    outline: none;
}

或

a {
    outline: 0;
}

以上兩種方式都將移除元素的外輪廓，即便在元素獲得焦點時，外輪廓也不會出現。這對于 輔助提示 是不友好的。

當然，你可以給用戶提供 自定義焦點效果，從而替換默認的點狀邊框。為此，移除掉outline,添加對應的改善效果，就很人性化很合理了。那么,好的解決方式之一就是使用 :focus 來提供新的樣式 的同時，重設outline,例子如下:

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

規則 ID: outline-none

此規則意在 確保純鍵盤用戶 獲得焦點提示。為此,規則發現以下情況 提示警告:

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;
}

以下示例 不會提示警告:

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

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

移除元素名稱也同時降低了CSS與HTML的耦合度，允許你改變元素使用的樣式類，而不需要更新CSS樣式文件。

規則 ID: overqualified-elements

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

以下示例 提示警告:

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;
}

標題元素(h1-h6) 應定義為頂級樣式 且 不能在頁面其它區域 定義其特定樣式。標題樣式 應以面向對象的思維來考慮設計，并且 在整個站點中的展示效果應當保持一直。這種方式允許在站點中復用你的樣式 從而利于站點的統一展示，健壯代碼與維護。舉個例子，以下代碼為 過度定義標題:

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

規則 ID: qualified-headings

此規則意在 找出 定義了標題的規則，因此 警告將出現在 樣式規則里將 標題元素 作為最后一個選擇器。

以下示例 提示警告:

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

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

以下示例 不提示警告:

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

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

如屬性選擇器僅包含屬性本身，則此屬性選擇器實際上沒有性能問題。舉個例子，以下選擇器 僅匹配 元素定義了href屬性:

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

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

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

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

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

Yahoo!

Redirect to Yahoo!

Login to Yahoo!

注意 不必擔心字符串兩邊是否有空格,因為只做部分匹配。

開始為

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

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

此規則將匹配如下示例:

Example

Extra! Extra!

Extreme

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

結尾為

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

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

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

Home

Example

單詞匹配

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

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

此規則將匹配如下例子:

Example

Example

Example

Example

包涵破折號

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

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

它將匹配如下示例:

Info

Info

Info

性能問題

以上所有這些復雜的屬性選擇器 都須通過一遍又一遍的計算來匹配對應屬性值,從而確保最終的顯示效果正確。為此,CSS需要開銷更多的時間,來計算整個頁面的顯示效果。

規則 ID:regex-selectors

此規則意在 標識出 存在影響性能問題的潛在選擇器。為此,規則在發現選擇器使用 *=,|=,^=,$=,~=提示警告。

以下示例 提示警告:

.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;
}

以下示例 不會提示警告:

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

.mybox[class]{
    color: red;
}

有時咱們編寫一條規則時,使用簡寫來代替多屬性定義會更好,例如:

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

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

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

使用簡寫屬性可以幫助減少CSS體積的大小。

規則 ID: shorthand

此規則意在 檢索出可簡寫的屬性來減少文件體積。因此,在如下示例中 提示警告:

當margin-left,margin-right,margin-top,margin-bottom在同一規則中使用時。

當padding-left,padding-right,padding-top,padding-bottom在同一規則中使用的。

以下示例 提示警告:

.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;
}

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

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

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

星號前綴是依賴老版IE的CSS解析器缺陷，也因此，并不建議使用它。

規則 ID: star-property-hack

此規則意在 消除在CSS中使用星號前綴.因此,在發現屬性名前使用星號時提示警告。

以下示例 提示警告:

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

文本負縮進通常當作輔助的目的，來隱藏在屏幕上的文字。使用場景之一就是作為圖像替換技術，使用文本負縮進，可確保屏幕閱讀器在文本沒有顯示在屏幕中時也能讀取其數據。使用visibility:hidden或display:none會使得屏幕閱讀器略過文本信息，因此，運用文本負縮進被視為更好的輔助處理方式。

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

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

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

當文本負縮進使用在橫向視圖頁面時，會引起一定的麻煩，因為會出現一個很長的橫向滾動條。此問題可以通過添加direction:ltr來解決，如下:

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

關于文本負縮進是否會影響頁面搜索排名，出現了各種不同的聲音。 Anecdotal accounts 覺得Google會把文本負縮進當作垃圾廣告技術來處理，但是這并未得到驗證。

規則 ID: text-indent

此規則意在 找出CSS代碼中使用text-indent的潛在問題。警告出現在 text-indent的值為-99或類似(如，-100，-999)，而沒有使用direction:ltr時。數值的單位不會考慮在其中，因為px，em或其它單位 會看作等同。

以下示例 提示警告:

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

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

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

以下示例 不會提示警告:

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

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

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

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

在這個例子中，IE6及以前游覽器把_width屬性 當width看待，所以實際寬度為200px;其它游覽器則跳過此屬性，因而實際值為100px。

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

規則 ID: underscore-property-hack

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

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

面相對象CSS (OOCSS) 要求定義可重用的對象，以確保在站點的任何位置使用時，都有著相同的顯示效果。標題元素 (h1 - h6) 應當作為內建對象考慮，使其不管在何處使用均為同樣的顯示效果。因此，每個標題元素，因當只被規則定義一次。多處規則定義相同的標題顯示效果，會使其很難使用，因為 標題樣式會因為上下文環境不一致而出現不同展示效果。

規則 ID:unique-headings

此規則意在 標識出重復定義標題元素的聲明。因此，警告出現在 對同一標題 定義了多個規則時。

以下示例提示警告:

/* 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;
}

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

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

游覽器按照從右至左的順序解析選擇器，因此這個規則將首先匹配文檔中的所有元素。然后，逐一檢測這些元素是否匹配下級規則，即是否擁有祖先樣式mybox。如果包涵 * 的選擇器越復雜，其解析的時間越久。正是因為此原因，推薦在使用 通用選擇器時，避免將其放置選擇器的最右側。

規則 ID: universal-selector

此規則意在 標示出 因為使用通用選擇器而引起緩慢的樣式規則。因此，在發現通用選擇器 出現在 選擇器的最右側時 提示警告。

以下示例提示警告:

* {
    color: red;
}

.selected * {
    color: red;
}

以下示例 不提示警告:

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

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

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

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

規則 ID: unqualified-attributes

此規則意在 標示出 因使用未定義屬性選擇器而造成解析緩慢的規則。因此，在未定義屬性選擇器出現在規則最右側時，提示警告。

以下示例提示警告:

[type=text] {
    color: red;
}

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

以下示例 不提示警告:

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

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

當使用游覽器前綴屬性 如-moz-border-radius，你應當同時編寫標準屬性，以保障今后的兼容性。標準屬性編寫應在 游覽器前綴屬性之后，以確保 標準屬性能被游覽器識別使用到，如下:

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

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

規則 ID: vendor-prefix

此規則意在確保 不論何時使用游覽器前綴屬性時，與其匹配的標準屬性均同時編碼。因此，規則在以下條件時，提示警告:

游覽器前綴屬性之后，沒有跟隨與其匹配的標準屬性。

與游覽器前綴屬性匹配的標準屬性，出現在前綴屬性之前。

以下示例 提示警告:

/* 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;
}

在任何場景下，不論是長度單位還是百分比，使用 0 值而不指定單位，都是允許且正常運行的。在 0px，0em，0%，或其它 0值單位之間，均無任何差別。單位在這里并不重要，因為值本身 都會是 零。CSS允許咱們省略 零值的單位，并依舊視為合法的CSS。

推薦 移除所有長度為 零后面的單位;因為在游覽器中規定的單位并不會起效，所以在安心移除的同時，還減小了文件體積。

規則 ID: zero-units

此規則意在 標示出 長度為零 且帶有單位的情形。因此，在發現 0 后跟隨了單位或百分比時，提示警告。

以下示例 提示警告:

.mybox {
    margin: 0px;
}

.mybox {
    width: 0%;
}

.mybox {
    padding: 10px 0px;
}

以下示例 不提示警告:

.mybox {
    margin: 0;
}

.mybox {
    padding: 10px 0;
}