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; }
有注释消灭的,可以不用考虑
这里面有几点我们经常忘记的用红色字标注了。
相关推荐
lint-csslint 这对棉短绒插件提供了一个接口 。 它将与具有“ CSS”或“ HTML”语法的文件一起使用。 安装 如果尚未安装linter ,则将为您安装它,以提供此程序包提供的服务的UI。 插件安装 apm install linter-...
npm工具csslint,解压后将.bat文件放到node_path路径下,源码文件放到node_modules文件下,就可以使用了。版本:0.10.0;日期:2016-8-4。
gulp-csslint gulp 3CSSLint插件 用法 首先,安装gulp-csslint作为开发依赖项: npm install --save-dev gulp-csslint 然后,将其添加到您的gulpfile.js : var csslint = require ( 'gulp-csslint' ) ; gulp . ...
运行CSSLint作为Mocha测试。 要以devDependency的形式安装在node.js项目中,请在项目的根目录中运行此命令 npm install mocha-csslint --save-dev --save-exact 用法 Mocha默认情况下是在项目的test文件夹中查找...
gulp-csslint gulp 3CSSLint插件 用法 首先,安装gulp-csslint作为开发依赖项: npm install --save-dev gulp-csslint 然后,将其添加到您的gulpfile.js : var csslint = require ( 'gulp-csslint' ) ; gulp . ...
xlint-csslint XLint 的 CSSLint 处理程序 使用该模块提供验证,以 安装 $ npm install xlint-csslint 测试 $ npm test
#gulp-csslint-teamcity gulp-csslint 的团队城市记者(受 jshint-teamcity 启发) 用法 首先,安装gulp-csslint-teamcity作为开发依赖: npm install --save-dev gulp-csslint 然后,将它添加到你的gulpfile.js...
csslint, 级联样式表的自动 linting CSSLintCSSLint是一个开源的CSS代码质量工具,最初由 Nicholas编写。 Zakas 和 Nicole 。 它是在 2011年06月的速度会议上发布的。一个 工具对源代码和标志模式执行 stati
grunt-contrib-csslint v2.0.0 Lint CSS文件入门如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-...
资源分类:Python库 所属语言:Python 资源全名:geoffrey_csslint-0.0.1-py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
有关含羞草的更多信息,请参阅 有关 csslint 的更多信息,请查看用法将'csslint'添加到您的模块列表中。 就这样! 当您启动mimosa watch或mimosa build时,Mimosa 将为您安装该模块。功能当mimosa watch或mimosa ...
它将验证CSS格式规则。 支持语言:English (United States)
gulp-csslint-gsoft-rules 添加一些规则来改善CSS Lint 检查选择器的情况检查选择器的深度安装使用npm安装: npm install --save-dev gulp-csslint-gsoft-rulesgulp-csslint// Add GSoft Custom ...
npm install -g grunt-cli csslint npm install // you should have administrative privileges to make symlink on Windows Git挂钩包含文件编码,行尾和非ASCII字符检查器,提交消息模式验证和scss linting。 ...
csslint 适用于diesdas Linter。 为什么要使用这种架构/短绒棉呢? 大多数CSS错误是由无意覆盖其他类的类引起的。 使用组件构建网站/界面时,例如,如果上级组件覆盖了组件样式,则可能会发生这种情况。 组件因...
验证 html 文档,包括在脚本标签上运行 jshint、jscs 和在样式标签上运行 csslint 一个 grunt 插件,用于在其中对 html 和内联、js 和 css 进行 linting 入门 这个插件需要 Grunt ~0.4.5 如果您以前没有使用过 ,...
该报告包含具有由 escomplex、jslint、csslint 提取的指标的文件列表以及文件之间的关系列表。 安装 $ npm install relex -g ##用法(CLI): relex path/to/website path/to/result/file.json relex path/to/...
wro4j是一个免费的开源java项目,它汇集了几乎所有的现代web工具:jshint、csslint、jsmin、google closure compressor、yui compressor、uglifyjs、dojo shrinksafe、css变量支持、json压缩、less、sass、...