文章为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的 放心大胆的使用吧)

通常来说，基于单类来定义一个样式要比多类定义更好。可以瞅瞅想想下面的例子：

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

box-model

注意盒子模型 Beware of box model size

盒子模型是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;
}

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属性代码。警告将出现在:

1. 属性出现两次且为相同的值。
2. 属性出现两次且被至少一个其它的属性所隔开。

以下示例将会提示警告:

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

此规则 意在确保在所有的游览器上都能显示合适的颜色。为此，将在如下情形 提示警告:

1. color属性使用rgba(),hsl(),hsla()颜色值时,在前处 未使用针对老版游览器的color颜色格式。
2. background属性使用rgba(),hsl(),hsla()颜色值时,在前处 未使用针对老版游览器的background颜色格式。
3. 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的方式:

1. 使用构建工具，在部署前，就将需要合并的CSS文件串联至一起。
2. 使用多个<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

此规则意在 确保纯键盘用户 获得焦点提示。为此,规则发现以下情况 提示警告:

1. outline: none 或 outline: 0 在选择器中使用,但未指定 :focus
2. 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

此规则意在 检索出可简写的属性来减少文件体积。因此,在如下示例中 提示警告:

1. 当margin-left,margin-right,margin-top,margin-bottom在同一规则中使用时。
2. 当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

此规则意在确保 不论何时使用游览器前缀属性时，与其匹配的标准属性均同时编码。因此，规则在以下条件时，提示警告:

1. 游览器前缀属性之后，没有跟随与其匹配的标准属性。
2. 与游览器前缀属性匹配的标准属性，出现在前缀属性之前。

以下示例 提示警告:

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