zoukankan      html  css  js  c++  java
  • CSS代码检查工具推荐:CSS Lint

    CSS Lint是一个开源的校验CSS文件质量的工具,最初是由Nicholas C. ZakasNicole Sullivan编写的,最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的和警告,当选择器或属性书写不正确、漏掉了大括号、多写了分号等时,会提示解析错误,解析错误优先提示。为了让css代码拥有更好性能,更标准,CSS Lint的检测规则有:

    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

    2. box-sizing(box-sizing)
    即使设置了box-sizing,仍然会warn,因为ie67不支持此属性

    3. display(display-property-grouping)

    (1)当设为inline时,不允许设置width, height, margin, margin-top, margin-bottom, float.

    (2)当设为inline-block时,不允许设置float.

    (3)当设为block时,不允许设置vertical-align.

    (4)当设为table-*时,不允许设置margin, float.

    4. 样式冗余(display-property-grouping)

    (1)同样属性名以及属性值,在同一个容器中不允许声明两遍

    (2)相同的属性名(但不同值),必须放在一起,不允许被其他属性隔开

    5. 空的样式规则(empty-rules)

    不允许出现空的样式规则

    6.使用已知样式,方式拼写错误(known-properties)

    (1)csslint不会检测以横线(-)开头的属性名

    (2)属性名和属性值的拼写都会检查

    7.链式class(known-properties)

    (1)不允许对相连的class(即链式class,类似于.foo.bar这样的)设置样式

    (2)可以新增一个class来代替链式class

    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

    10.不带vendor前缀的标准属性(vendor-prefix)

    要将不带vendor前缀的标准属性样式,放在带vendor前缀的属性的后面

    11.向后兼容的的颜色样式(fallback-colors)

    12. 文本反向缩进

    (1)当为text-indent的值设置为-99,或者更小的值(比如-100,-999)的时候,必须加上direction: ltr

    (2)csslint只检测text-indent的值,而不检测其的单位(em, px)。

    13. 字体过多(font-faces)

    当使用超过5个字体时,会warn

    14. @import(import)

    (1)可以将多个css合并为一个

    (2)使用多个<link>标签引入多个css文件

    15. 正则式的选择符(regex-selectors)

    (1)不允许使用类似于正则语法(*=, |=, ^=, $=, ~=)的css选择符

    16.通配符选择符(universal-selector)

    不能将通配符(*)作为选择符的关键部分(key part)

    17.属性选择符(unqualified-attributes)

    同上面的通配符一样,属性选择符不能作为选择符的关键部分(key part)

    18.零的单位(zero-units)

    19.高级选择符(overqualified-elements)

    (1)若某个class紧跟(无空白符)在多个不同的元素后面, 则合法

    (2)上面这条规则中,若不是多个,而只是一个的时候,则会warn

    20.属性简写(shorthand)

    (1)当在一个样式规则中,同时设置了margin-left, margin-right, margin-top, margin-bottom, 则会warn。

    (2)当在一个样式规则中,同时设置了padding-left, padding-right, padding-top, padding-bottom , 则会warn。

    21. 背景图片冗余(duplicate-background-images)

    (1)当多个样式需要使用同一张图片作为背景图片的时候,如果在这些样式规则中重复设定background-image, 则会warn

    (2)当多个样式需要使用同一张图片作为背景图片的时候,应该新建一个class样式用于指定background-image,其他样式则用于设定background-position

    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样式的同时,必须要使用其他样式

    27. heading样式(qualified-headings, unique-headings)

    (1)heading样式(h1-h6)应该全局化。也就是说在整个网站中,heading样式应该以常量形式出现。

    (2)不要对heading样式做局部定制,也就是说(h1-h6)不能作为css规则的关键部分(key part)。

    在线检测地址:http://csslint.net/

  • 相关阅读:
    [erlang 002]gen_server中何时会跑到terminate函数
    设计模式:桥接模式
    设计模式:组合模式
    Harbor:镜像上传和下载
    Harbor:简介和安装
    Docker:compose
    ThinkPHP的静态化页面方法
    php使用memcached详解
    大话PHP设计模式
    PHP魔术方法使用
  • 原文地址:https://www.cnblogs.com/oltra/p/5138878.html
Copyright © 2011-2022 走看看