csslint检测规范

标签: csslint 规范 | 发表时间:2012-03-14 08:01 | 作者:
出处:http://www.iteye.com
1. 盒模型(box-model)/*消灭*/
    (1)当设定width 的同时,还设置了border,border-left,border-right,padding,padding-left,padding-right中的任意一个,那么必须显示设置box-sizing
    (2)当设定height的同时,还设置了border,border-top,border-bottom,padding,padding-top,padding-bottom中的任意一个,那么必须显示设置box-sizing
    例如:
            正确
            .mybox { box-sizing: border-box; border: 1px solid black; width: 100px; }
   
           
2. box-sizing(box-sizing)/*消灭*/
    即使设置了box-sizing,仍然会warn,因为ie67不支持此属性
   
   
3. display(display-property-grouping)/*消灭*/
    /*csslint在此出只提到了显式设置display时的情况,对于未设置display时,如何检查如何警告未作描述*/
    (1)当设为inline      时,不允许设置width, height, margin, margin-top, margin-bottom, float.
    /* 关于inline和float,csslint还是提到了ie6 double margin ,但没有说对于要怎么处理 */
    (2)当设为inline-block时,不允许设置float.
    (3)当设为block       时,不允许设置vertical-align.
    (4)当设为table-*     时,不允许设置margin, float.
    例如:
            正确:
            .mybox { display: inline; margin-left: 10px; }
            错误
            .mybox { display: inline; height: 25px; }
          
           
4. 样式冗余(display-property-grouping)
    (1)同样属性名以及属性值,在同一个容器中不允许声明两遍
    (2)相同的属性名(但不同值),必须放在一起,不允许被其他属性隔开
    例如
            正确:
            .mybox { border: 1px solid black; border: 1px solid red;   }
            错误:
            .mybox { border: 1px solid black; border: 1px solid black; }
            .mybox { border: 1px solid black; color: green; border: 1px solid red; }


5. 空的样式规则(empty-rules)
    不允许出现空的样式规则
    例如   
            错误:
            .mybox {}
            .mybox { /* a comment */ }

           
6.使用已知样式,方式拼写错误(known-properties)
    (1)csslint不会检测以横线(-)开头的属性名
    (2)属性名和属性值的拼写都会检查
    例如
            错误:
            a { clr: red;   }
            a { color: foo; }
           
           
7.链式class(known-properties)
    (1)不允许对相连的class(即链式class,类似于.foo.bar这样的)设置样式
    (2)可以新增一个class来代替链式class
    例如
            错误:
            .foo { font-weight: bold; }
            .bar { padding: 10px;  }
            .foo.bar { color: red; }
            正确
            .foo { font-weight: bold; }
            .bar { padding: 10px; }
            .baz { color: red;    }
 

8. vendor前缀(compatible-vendor-prefixes)
    当出现以下样式时,应该拥有vender前缀,此时csslint会逐个检查Firefox(-moz),Safari/Chrome(-webkit),Opera(-o),以及Internet Explorer(-ms)前缀是否齐全,若少一种前缀,则会warn。
            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
           

9.渐变样式(gradients)
    对于渐变样式,不同浏览器有不同的属性名称,不仅仅是前缀不同,区别如下
            Internet Explorer 10+              : -ms-linear-gradient    , -ms-radial-gradient
            Firefox 3.6+                       : -moz-linear-gradient   , -moz-radial-gradient
            Opera                              : -o-linear-gradient     , -o-radial-gradient for
            Safari 5+ and Chrome               : -webkit-linear-gradient, -webkit-radial-gradient
            Safari 4+ and Chrome("Old WebKit") : -webkit-gradient
    csslint会检查与渐变(gradient)相关的样式,若以上样式只写了一个或几个,且没有写全,则会warn
    例如
            错误:
            /* 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%);
            }
            正确:
            /* 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%);
            }
           
           
10.不带vendor前缀的标准属性(vendor-prefix)
    要将不带vendor前缀的标准属性样式,放在带vendor前缀的属性的后面
    例如
            错误:
            .mybox { -moz-border-radius: 5px; }
            .mybox { border-radius: 5px; -webkit-border-radius: 5px; }
            正确:
            .mybox { -moz-border-radius: 5px; border-radius: 5px; }
           
           
11.向后兼容的的颜色样式(fallback-colors)
    (1)在使用css3中的颜色样式(rgba,hsl,hsla)时候, 同时也要加上一个普通的颜色样式(十六进制,颜色名称,或者rgb)
    (2)css3的颜色样式要写在普通颜色样式的后面
    (3)csslint会根据以上规则去检测color, background, background-color属性
    例如
            错误:
            .mybox { color: rgba(100, 200, 100, 0.5); }
            .mybox { background-color: hsla(100, 50%, 100%, 0.5); }
            .mybox { background: hsla(100, 50%, 100%, 0.5) url(foo.png); }
            .mybox { background-color: hsl(100, 50%, 100%); background-color: green; }
            正确:
            .mybox { color: red; color: rgba(255, 0, 0, 0.5); }
           
           
12. 文本反向缩进
    (1)当为text-indent的值设置为-99,或者更小的值(比如-100,-999)的时候,必须加上direction: ltr
    (2)csslint只检测text-indent的值,而不检测其的单位(em, px)。
    例如
            错误:
            .mybox { text-indent: -999px; }
            .mybox { text-indent: -999em; }
            .mybox { direction: rtl; text-indent: -999em; }
            正确:
            .mybox { direction: ltr; text-indent: -999em; }
            .mybox { text-indent: -1em; }
           

13. 字体过多(font-faces)
    当使用超过5个字体时,会warn
   
   
14. @import(import)
    (1)可以将多个css合并为一个
    (2)使用多个<link>标签引入多个css文件


15. 正则式的选择符(regex-selectors)
    (1)不允许使用类似于正则语法(*=, |=, ^=, $=, ~=)的css选择符
    例如
            正确:
            a[href] { color: red; }
            a[rel=external] { color: blue; }
            错误:
            a[href*=yahoo.com] { color: green; }
            a[rel^=ext]        { color: red;   }
            a[href$=.html]     { color: blue;  }
            a[rel~=external]   { color: red;   }
            a[data-info|=name] { color: red;   }
           
           
16.通配符选择符(universal-selector)
    不能将通配符(*)作为选择符的关键部分(key part)
    例如:
            错误:
            *             { color: red; }
            .selected *   { color: red; }
            正确:
            .selected * a { color: red; }
           
           
17.属性选择符(unqualified-attributes)
    同上面的通配符一样,属性选择符不能作为选择符的关键部分(key part)
    例如:
            错误:
            [type=text]           { color: red; }
            .selected [type=text] { color: red; }
            正确:
            .selected [type=text] a { color: red; }
           
           
18.零的单位(zero-units)
    零后面不能跟单位
    例如:
            错误:
            .mybox { margin: 0px; }
            .mybox { width: 0%; }
            .mybox { padding: 10px 0px; }
            正确:
            .mybox { margin: 0; }
            .mybox { padding: 10px 0; }
           
           
19.高级选择符(overqualified-elements)/*消灭*/
    (1)若某个class紧跟(无空白符)在多个不同的元素后面, 则合法
    (2)上面这条规则中,若不是多个,而只是一个的时候,则会warn
    例如:
            错误:
            div.mybox        { color: red; }
            .mybox li.active { background: red; }
            正确:
            li.active { color: red; }
            p.active  { color: green;}
           
           
20.属性简写(shorthand)
    (1)当在一个样式规则中,同时设置了margin-left, margin-right, margin-top, margin-bottom, 则会warn。
    (2)当在一个样式规则中,同时设置了padding-left, padding-right, padding-top, padding-bottom , 则会warn。
    例如:
            错误:
            .mybox { margin-left: 10px; margin-right: 10px; margin-top: 20px; margin-bottom: 30xp }
            .mybox { padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 30px; }
            正确:
            .mybox { margin-left: 10px; margin-right: 10px; }
            .mybox { padding-right: 10px; padding-top: 20px; }
           
           
21. 背景图片冗余(duplicate-background-images)
    (1)当多个样式需要使用同一张图片作为背景图片的时候,如果在这些样式规则中重复设定background-image, 则会warn
    (2)当多个样式需要使用同一张图片作为背景图片的时候,应该新建一个class样式用于指定background-image,其他样式则用于设定background-position
    例如
            错误:
            .heart-icon { background: url(sprite.png) -16px 0 no-repeat; }
            .task-icon  { background: url(sprite.png) -32px 0 no-repeat; }
            正确:
            .icons { background: url(sprite.png) no-repeat; }
            .heart-icon { background-position: -16px 0; }
            .task-icon  { background-position: -32px 0; }
   
   
22. 浮动(floats)/*消灭*/
    (1)当使用float超过10次时,csslint会warn
    (2)在某些情况下,可以使用grid systems代替频繁的float
   
   
23. 字体大小(font-sizes)
    尽可能少用font-size,而应该设定几个样式规则用于对于不同的字体大小,然后在需要设定字体大小的地方添加需要的样式规则
   
   
24. id选择符(ids)/*消灭*/
    使用class选择符代替id选择符
   
   
25. !important(important)/*消灭*/
    不允许使用!important

   
26. outline(outline-none)/*消灭*/
    (1)只有在包含伪类:focus的样式规则中,才能移除(设为none或者0)outline样式
    (2)在包含伪类:focus的样式规则中,移除outline样式的同时,必须要使用其他样式
    例如:
            错误:
            a { outline: none; }
            a { outline: 0; }
            a:focus { outline: 0; }
            正确:
            a:focus { border: 1px solid red;outline: 0; }
           

27. heading样式(qualified-headings, unique-headings)
    (1)heading样式(h1-h6)应该全局化。也就是说在整个网站中,heading样式应该以常量形式出现。
    (2)不要对heading样式做局部定制,也就是说(h1-h6)不能作为css规则的关键部分(key part)。
    例如:
            错误:
            h3 { font-weight: normal; }
            .box h3 { font-weight: bold; }
            正确:
            h3 { font-weight: normal; }
            h3:hover { font-weight: bold; }


有注释消灭的,可以不用考虑

这里面有几点我们经常忘记的用红色字标注了。

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [csslint 规范] 推荐:

csslint检测规范

- - ITeye博客
盒模型(box-model)/*消灭*/.     (1)当设定width 的同时,还设置了border,border-left,border-right,padding,padding-left,padding-right中的任意一个,那么必须显示设置box-sizing.     (2)当设定height的同时,还设置了border,border-top,border-bottom,padding,padding-top,padding-bottom中的任意一个,那么必须显示设置box-sizing.

javascript 编程规范

- 红茶 - 博客园-Ruby&#39;s Louvre
为公司起草的javascript编程规范,参考了网上的许多资料,尤其是google的规范. 现在放出来,希望能抛砖引玉,大家多提宝贵意见. 本规范是针对javascript函数式编程风格与公司严重依赖于jQuery进行编码的现实制定出来. 禁止使用eval,with与caller(ecma262 v5 的use strict要求).

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .

java编码规范

- - ITeye博客
   总结前期做的几个项目,个人认为代码的规范对团队的协作有着密切的关系. 现将一些常用的约束总结如下,以便今后参阅:. 1、所有的类、属性、方法都遵守以字母和数字为主,尽量不要参与特殊符号如下划线. 其次,除类名开头字母大写外,其他名字都要小写,然后第二个后的单词首字母大写,长度在30个字符以内.

oracle 编码规范

- - 操作系统 - ITeye博客
军规一:【恰当控制事务大小,commit不要过于频繁. 】 军规二:【在OLTP系统中一定要注意使用绑定变量. 】 军规三:【在OLTP系统中一定要注意复杂的多表关联不宜超过4个,关联十分复杂时,需要拆分成多个步骤,防止执行计划不正确. 】 军规四:【合理收集统计信息,固定住SQL的执行计划. 】 军规五:【尽量避免使用XA事务,在RAC环境中要避免XA事务跨节点操作.

python编程规范

- - 互联网 - ITeye博客
@FileName: @Author:xx@ic.net.cn @Create date: @description:用一行文字概述模块或脚本,用句号结尾. 不影响编码的效率,不与大众习惯冲突.. 使代码的逻辑更清晰,更易于理解..   *所有的 Python 脚本文件都应在文件头标上如下标识或其兼容格式的标识.

Java编程规范

- - Web前端 - ITeye博客
本文档的编写从简,绝大多数内容以条款或者表格形式列出,不做过多的补充说明,代码格式规范遵循eclipse的默认编码规范要求. •    简单,易执行. 1.    名字含义要明确,做到见名知义,如: User,Role, UserManager. 2.    尽量使用英文名字作为变量名,如果要使用中文,请写上备注.

HTML编码规范

- - SegmentFault 最新的文章
这段时间在整理前端部分代码规范,初步想法是从HTML、CSS、Javascipt、项目文件目录四部分是整理. 之前已经整理完了 CSS编码规范,有兴趣可以了解下. [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. 对于非 HTML 标签之间的缩进,比如 script 或 style 标签内容缩进,与 script 或 style 标签的缩进同级.

密码管理规范

- cong - shell&#39;s home
    下面是贝壳自己总结的密码管理规范,大家可以参考一下. 网络密码通常很难暴力攻击,尝试速度受到网络限制,而且尝试一定次数后还可能被管理员发现. 而本地密码则相对比较容易攻击,我假定本地密码攻击可以达到每秒测试2^30个密码. 密码长度推定使用如下计算方式. 使用年数乘以攻击频率,得出攻击者在密钥使用期限内能尝试的最大次数.

JavaScript之编码规范

- - CSDN博客推荐文章
   JavaScript是一种语法灵活,简单易懂的脚本语言. 正因为灵活,因此很多人在编写代码时,显得很随意,这就导致后期的修改、扩展和维护变得异常困难. 遵循统一的编码规范,不仅对C++和Java这种编译型语言很重要,对JavaScript脚本语言也同样如此.       1、应给变量和函数取一个含义确切的名称,不要随意命名.