css检测,CSS检测工具 CSS Lint简介
Nicholas C. Zakas最近发布了CSS Lint,旨在检测CSS代码中存在的各种问题,从而写出更高效的CSS。
CSS Lint现有的一些规则:
修复解析错误(Parsing errors should be fixed)
避免使用多类选择符(Don't use adjoining classes)
IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确,参考IE6下的多类选择符一文。
移除空的css规则(Remove empty rules)
这个规则不包含任何属性,类似:
.foo { }
空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
正确使用display的属性(Use correct properties for a display)
由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用浮动(Don't use too many floats)
虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。
不滥用web字体(Don't use too many web fonts)
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
不声明过多的font-size(Don't use too may font-size declarations)
这是设计层面的问题,设计精良的页面不会有过多的font-size声明。
不在选择符中使用ID标识符(Don't use IDs in selectors)
主要考虑到样式重用性以及与页面的耦合性。
不给h1~h6元素定义过多的样式(Don't qualify headings)
全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。
不重复定义h1~h6元素(Heading styles should only be defined once)
值为0时不需要任何单位(Zero values don't need units)
标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)
通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:
.foo {-moz-border-radius: 5px;border-radius: 5px; }
使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)
避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)
CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。
遵守盒模型规则(Beware of broken box models)
上述某些规则也许不是最佳实践,可根据项目需求自行添加修改,这也符合CSS Lint pluggable的宗旨。Zakas还给出了CSS Lint for Node.js的检测工具,于是我将Zakas的demo.css在本地试跑了一下,给出的提示简洁明了:
目前CSS Lint项目刚刚起步,正在征集一些优秀的CSS规则#issues,相信在Zakas以及Node社区的推动下,这个项目会发展地越来越好。
CSS Lint,lint是线头的意思,大概意思就是说要找出我们写的css代码里的一些线头,help you code better!
CSS Lint的检测规则包括错误的和警告,当选择器或属性书写不正确、漏掉了大括号、多写了分号等时,会提示解析错误,解析错误优先提示。为了让css代码拥有更好性能,更标准,CSS Lint还默认有如下规则:
1.不要使用多个class选择元素,如a.foo.boo,这在ie6及以下不能正确解析
2.移除空的css规则,如a{}
3.正确的使用显示属性,如display:inline不要和width,height,float,margin,padding同时使用,display:inline-block不要和float同时使用等
4.避免过多的浮动,当浮动次数超过十次时,会显示警告
5.避免使用过多的字号,当字号声明超过十种时,显示警告
6.避免使用过多web字体,当使用超过五次时,显示警告
7.避免使用id作为样式选择器
8.标题元素只定义一次
9.使用width:100%时要小心
10.属性值为0时不要写单位
11.各浏览器专属的css属性要有规范,
例如.foo{-moz-border-radius:5px;border-radius:5px}
12.避免使用看起来像正则表达式的css3选择器
13.遵守盒模型规则
在实际项目中很多规则还不是很合理,比如避免IE6的双倍边距bug有时候要用到display:inline;
我测试了最近项目中的两个css文件,警告主要出现在以下方面:
1.width:100%
当宽度设置为100%的时候,CSS Lint会给出警告
2.盒模型错误
好像width和height不能与padding和border同时使用,为什么会这样呢?很怪异
3.多余的标签
比如a.class,CSS Lint会建议你直接使用.class,如果使用了a.class,会警告
4.显示属性错误
比如display:inline与float一起使用时,会警告
看到这里,也许你会说这一款检测工具还不够成熟,的确,它的解析错误检测,空规则检测,属性值为0带单位的检测挺不错,其余的可能有一点差强人意,但它的 检测规则一直在不断丰富和完善中,同时你也可以提交规则,并且最重要的是,现在,你已经可以自己设置,关掉一些不需要的规则
这个时候,CSS Lint就会显得好用很多。
假以时日,我相信CSS Lint会越来越强大的。More and more Strong, Smart and Useful!
个人观点:虽然不是很智能,但是对于初学者还是很有帮助的!
css检测,CSS检测工具 CSS Lint简介相关推荐
- CSS Sprites 样式生成工具
CSS 图片拼合生成器 http://cn.spritegen.website-performance.org/ Css背景图合并工具功能增强(附V0.11源码和可执行文件) http://www.c ...
- css减肥瘦身工具cleancss
CleanCSS是一款基于web的CSS分析以及优化应用程序,可以帮助设计者对CSS中的属性进行最大优化以及对拼写中的错误进行高亮检测:众所周知,好的DIV+CSS布局不仅可以美化网站,更能深度影响到 ...
- CSS:css减肥瘦身工具
CleanCSS是一款基于web的CSS分析以及优化应用程序,可以帮助设计者对CSS中的属性进行最大优化以及对拼写中的错误进行高亮检测:众所周知,好的DIV+CSS布局不仅可以美化网站,更能深度影响到 ...
- [css] 移动页面底部工具条有3个图标,如何平分?在设置边框后最后一个图标掉下去了怎么办?
[css] 移动页面底部工具条有3个图标,如何平分?在设置边框后最后一个图标掉下去了怎么办? flex-wrap nowrap, 一般flex默认就是nowrap white-space:nowrap ...
- 在线CSS代码压缩美化工具
在线CSS代码压缩美化工具 在线CSS代码压缩美化工具 在线CSS代码压缩.格式化工具.可以删除注释 在线CSS代码压缩.格式化工具.可以删除注释 https://tooltt.com/css/
- html path 图标,Clippy – 轻松绘制 CSS clip-path 裁剪路径工具
Clippy – 轻松绘制 CSS clip-path 裁剪路径工具 4月 13, 2016 评论 Sponsor Clippy 是一个 CSS clip-atch 属性绘制工具,使用它可以轻松绘制不 ...
- css文字瘦,前端开发CSS减肥工具:CSS Usage
做 web前端开发用什么工具包 前端开发产业是指什么意思 前端构建工程师经常会遇到随着网站产品的规模扩大.产品数量.日常专题上下线等情况,造成网站的CSS Usage.首先,我们需要安装Firefox ...
- 在线调色工具 在线CSS工具 CSS设计展示网站汇总
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在线调色 ...
- css透明度生成器,导航CSS代码在线生成工具
<导航CSS代码在线生成工具>由会员分享,可在线阅读,更多相关<导航CSS代码在线生成工具(29页珍藏版)>请在人人文库网上搜索. 1.http:/taobaokaidian. ...
- css自定义字体转换工具_5种最佳CSS3字体工具
css自定义字体转换工具 自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...
最新文章
- 检测单选按钮的值发生变化的事件
- 50个令人大开眼界的 Matplotlib 可视化项目
- java和c 进行des_c语言的des加密,怎么用java解密
- Android CameraSurfaceView在SurfaceView上实现拍照,视频录像
- 日志中台不重不丢实现浅谈
- 重载和const形参
- idea点击表单按钮不做post反应
- iceberg对接flinksql测试
- 关于Django的搭建
- 图论最短路及生成树(Prim,Djikstra,Spfa,Bellan-ford,kruskal,topsort)
- 为什么在WSE配置中不要选择Establish Secure Session
- 智能家居实训系统的项目有感!
- JavaScript入门到精通,需要掌握的技能盘点
- 在图书馆使用计算机管理属于,图书馆计算机使用管理规定
- 我们为什么存在于三维空间而不是四维空间
- python excel行列转置_Excel 行列转换的最简方法
- java wed 1
- 关于find_busiest_group函数提现出的Linux性能问题
- html手机打不开是什么意思,html是什么意思
- ValueError: n_splits=4 cannot be greater than the number of members in each class