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

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