csslint 語法建議規則

時間 2019-11-16

標籤 csslint 語法建議規則简体版

原文原文鏈接

文章爲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

adjoining-classes

不容許使用相鄰類 Disallow adjoining classes

像.foo.bar這樣的相鄰類，也能夠稱之爲類鏈。在CSS規範中容許使用，但在IE6即更早版本中可能就很差使了。IE僅會命中.bar選擇器，也就是說你的選擇器不會按你的套路出牌，埋下游覽器樣式兼容性問題的種子。(不用IE6的放心大膽的使用吧)css

一般來講，基於單類來定義一個樣式要比多類定義更好。能夠瞅瞅想一想下面的例子：html

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

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

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

那麼這個新類 baz 必須添加至原有的HTML元素上。這樣更利於維護，由於.baz 規則，此刻就能夠被複用了，而.foo.bar規則只能被用在前一種固有的狀況下。github

規則說明與示例

規則 ID: adjoining-classesweb

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

如下例子將會出現警告:bootstrap

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

如下例子將不會出現警告:網絡

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

box-model

注意盒子模型 Beware of box model size

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

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

box-sizing

不容許使用盒子大小 Disallow box sizing

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

bulletproof-font-face

預防字體引用錯誤 Bulletproof font face

當使用@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文件，這就無所謂了)

compatible-vendor-prefixes

使用遊覽器前綴 Require compatible vendor prefixes

實驗性的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;
}

empty-rules

不容許空規則 Disallow empty rules

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

.foo {
}

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

規則說明與示例

規則 ID: empty-rules

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

.mybox { }

.mybox {

}

.mybox { /* a comment */ }

.mybox {
    /* a comment */
}

display-property-grouping

給display設置匹配的組合屬性 Require properties appropriate for display

儘管你能夠在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;
}

duplicate-background-images

不容許重複背景圖片 Disallow duplicate background images

儘量的使用較少的代碼來完成功能，是高性能的準則之一。所以，同個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;
}

duplicate-properties

不容許重複屬性 Disallow duplicate properties

在早先網頁開發中，相同的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;
}

fallback-colors

要求備用色彩 Require fallback colors

剛開始時，有三種方式來指定顏色：使用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);
}

floats

不容許過多的浮動 Disallow too many floats

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-faces

不使用過多網絡字體 Don't use too many web fonts

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

font-sizes

不使用過多的字體大小聲明 Don't use too many font size declarations

一個利於維護的站點，一般都有通用的字體集。這些字體大小，每每定義在一個表明其含義的抽象類當中，以便運用到站點的各個使用場景。若是未抽取出公用類，會致使開發者頻繁的使用font-size,來使元素大小按預期顯示。這就帶來了一個問題，當設計的字體大小改變後，咱們須要改變樣式中全部設計的字體大小。而抽取出類時，只用改變類中定義的大小便可作到全局調整。

你能夠建立一些標準字體大小類，如:

.small {
    font-size: 8px;
}

.medium {
    font-size: 11px;
}

.large {
    font-size: 14px;
}

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

規則說明與示例

規則 ID:font-sizes

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

gradients

要求定義全部漸變前綴 Require all gradient definitions

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

ids

不容許 ID 選擇器 Disallow IDs in selectors

一直以來，開發者對 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

不容許使用@import Disallow @import

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

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

a {
    color: black;
}

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

有兩種替代@import的方式:

使用構建工具，在部署前，就將須要合併的CSS文件串聯至一塊兒。
使用多個<link>標籤來引入你須要的CSS樣式。<link>引入是支持並行下載的。

規則說明與示例

規則 ID: import

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

如下示例將提示警告:

@import url(foo.css);

important

不容許使用 !important Disallow !important

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

規則說明與示例

規則 ID: important

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

如下示例將提示警告:

.mybox {
    color: red !important;
}

known-properties

要求使用已知屬性 Require use of known properties

可供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-none

不容許 outline:none Disallow outline:none

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

overqualified-elements

不容許過分定義選擇器 Disallow overqualified elements

編寫如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;
}

qualified-headings

不容許定義標題 Disallow qualified headings

標題元素(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;
}

regex-selectors

不容許選擇器相似與表達式 Disallow selectors that look like regular expressions

CSS3增長了複雜的屬性選擇器使得咱們能夠根據表達式來匹配屬性值。這系列的選擇器有着性能的影響，表達式匹配與簡單的類名匹配相比速度要慢。在諸多場景裏，是使用一個不肯定值的選擇器仍是簡單的給元素增長一個類名選擇器還在討論中。這裏有幾種須要注意的屬性選擇器。

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

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

此屬性選擇器能正常使用而且也不會形成任何性能問題。

如屬性選擇器使用肯定的值做爲匹配條件，則此屬性選擇器也是沒問題的。舉個例子,如下選擇器僅匹配<a>元素的rel屬性值爲 "external" :

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

除以上兩種狀況，其它條件下使用屬性選擇器會形成性能問題。各屬性選擇器都有着相似的基本格式，在元素名稱後使用方括號，與等號組合成的標識符，來進行表達式匹配。

包含

第一類"問題"選擇器是包涵選擇器。選擇器使用 *=來匹配屬性值中包涵給定的字符串元素。工做原理相似與JavaScript中indexOf()方法,只要檢索的值出如今屬性值的任意位置便可,例子以下:

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

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

<a href="http://www.yahoo.com/">Yahoo!</a>

<a href="http://www.google.com/redirect=www.yahoo.com">Redirect to Yahoo!</a>

<a href="http://login.yahoo.com/">Login to Yahoo!</a>

注意沒必要擔憂字符串兩邊是否有空格,由於只作部分匹配。

開始爲

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

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

此規則將匹配以下示例:

<a href="http://www.example.com" rel="external">Example</a>

<a rel="extra">Extra! Extra!</a>

<a rel="extreme">Extreme</a>

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

結尾爲

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

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

此規則匹配全部 <a>元素以其href屬性值爲.html結尾的條件。如下示例將匹配:

<a href="index.html">Home</a>

<a href="http://www.example.com/example.html">Example</a>

單詞匹配

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

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

此規則將匹配以下例子:

<a href="http://www.example.com" rel="external">Example</a>

<a href="http://www.example.com" rel="external me">Example</a>

<a href="http://www.example.com" rel="reference external">Example</a>

<a href="http://www.example.com" rel="friend external me">Example</a>

包涵破折號

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

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

它將匹配以下示例:

<a data-info="name-address-phone">Info</a>

<a data-info="address-name-phone">Info</a>

<a data-info="address-phone-name">Info</a>

性能問題

以上全部這些複雜的屬性選擇器都須經過一遍又一遍的計算來匹配對應屬性值,從而確保最終的顯示效果正確。爲此,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;
}

shorthand

要求簡寫屬性 Require shorthand properties

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

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

star-property-hack

不容許星號前綴 Disallow star hack

星號前綴是有名(也可能無名)的技巧，僅用來在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;
}

text-indent

不容許文本負縮進 Disallow negative text indent

文本負縮進一般看成輔助的目的，來隱藏在屏幕上的文字。使用場景之一就是做爲圖像替換技術，使用文本負縮進，可確保屏幕閱讀器在文本沒有顯示在屏幕中時也能讀取其數據。使用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;
}

underscore-property-hack

不容許下劃線前綴 Disallow underscore hack

下劃線前綴是僅對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;
}

unique-headings

標題應只定義一次 Headings should only be defined once

面相對象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;
}

universal-selector

不容許通用選擇器 Disallow universal selector

通用選擇器 (*) 匹配全部元素。儘管每次都能很方便的選擇一組元素，但若是將其做爲選擇器的核心部分(選擇器位置的最右側) 則會形成性能問題。舉個例子，以下的規則形式應該避免使用:

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

unqualified-attributes

不容許未定義的屬性選擇器 Disallow unqualified attribute selectors

未定義屬性選擇器，如 [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;
}

vendor-prefix

要求遊覽器前綴屬性與標準屬性組合使用 Require standard property with vendor prefix

遊覽器前綴屬性是各遊覽器提供商在標準樣式還未建成時，提供實驗性新增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;
}

zero-units

不容許零值有單位 Disallow units for zero values

在任何場景下，不管是長度單位仍是百分比，使用 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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

csslint 語法建議規則

adjoining-classes

不容許使用相鄰類 Disallow adjoining classes

規則說明與示例

box-model

注意盒子模型 Beware of box model size

規則說明與示例

box-sizing

不容許使用 盒子大小 Disallow box sizing

規則說明與示例

bulletproof-font-face

預防字體引用錯誤 Bulletproof font face

規則說明與示例

compatible-vendor-prefixes

使用遊覽器前綴 Require compatible vendor prefixes

規則說明與示例

empty-rules

不容許空規則 Disallow empty rules

規則說明與示例

display-property-grouping

給display設置匹配的組合屬性 Require properties appropriate for display

規則說明與示例

duplicate-background-images

不容許重複背景圖片 Disallow duplicate background images

規則說明與示例

duplicate-properties

不容許重複屬性 Disallow duplicate properties

規則說明與示例

fallback-colors

要求備用色彩 Require fallback colors

規則說明與示例

floats

不容許過多的浮動 Disallow too many floats

規則說明與示例

font-faces

不使用過多網絡字體 Don't use too many web fonts

font-sizes

不使用過多的字體大小聲明 Don't use too many font size declarations

規則說明與示例

gradients

要求定義全部漸變前綴 Require all gradient definitions

規則說明與示例

ids

不容許 ID 選擇器 Disallow IDs in selectors

規則說明與示例

import

不容許 使用@import Disallow @import

規則說明與示例

important

不容許 使用 !important Disallow !important

規則說明與示例

known-properties

要求使用已知屬性 Require use of known properties

規則說明與示例

outline-none

不容許 outline:none Disallow outline:none

規則說明與示例

overqualified-elements

不容許 過分定義選擇器 Disallow overqualified elements

規則說明與示例

qualified-headings

不容許 定義標題 Disallow qualified headings

規則說明與示例

regex-selectors

不容許 選擇器相似與表達式 Disallow selectors that look like regular expressions

規則說明與示例

shorthand

要求簡寫屬性 Require shorthand properties

規則說明與示例

star-property-hack

不容許 星號前綴 Disallow star hack

規則說明與示例

text-indent

不容許 文本負縮進 Disallow negative text indent

規則說明與示例

underscore-property-hack

不容許 下劃線前綴 Disallow underscore hack

規則說明與示例

unique-headings

標題應只定義一次 Headings should only be defined once

不容許使用盒子大小 Disallow box sizing

不容許使用@import Disallow @import

不容許使用 !important Disallow !important

不容許過分定義選擇器 Disallow overqualified elements

不容許定義標題 Disallow qualified headings

不容許選擇器相似與表達式 Disallow selectors that look like regular expressions

不容許星號前綴 Disallow star hack

不容許文本負縮進 Disallow negative text indent

不容許下劃線前綴 Disallow underscore hack

不容許通用選擇器 Disallow universal selector

不容許未定義的屬性選擇器 Disallow unqualified attribute selectors

要求遊覽器前綴屬性與標準屬性組合使用 Require standard property with vendor prefix

不容許零值有單位 Disallow units for zero values