南昌地宝网最新招聘,网站营销优化,wordpress中文标签404,wordpress farmerNicholas C. Zakas最近发布了CSS Lint#xff0c;旨在检测CSS代码中存在的各种问题#xff0c;从而写出更高效的CSS。CSS Lint现有的一些规则#xff1a;修复解析错误(Parsing errors should be fixed)避免使用多类选择符(Dont use adjoining classes)IE6以及更古老的浏览器…Nicholas C. Zakas最近发布了CSS Lint旨在检测CSS代码中存在的各种问题从而写出更高效的CSS。CSS Lint现有的一些规则修复解析错误(Parsing errors should be fixed)避免使用多类选择符(Dont 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。不滥用浮动(Dont use too many floats)虽然浮动不可避免但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。不滥用web字体(Dont use too many web fonts)对于中文网站来说Web Fonts可能很陌生国外却很流行。web fonts通常体积庞大而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。不声明过多的font-size(Dont use too may font-size declarations)这是设计层面的问题设计精良的页面不会有过多的font-size声明。不在选择符中使用ID标识符(Dont use IDs in selectors)主要考虑到样式重用性以及与页面的耦合性。不给h1~h6元素定义过多的样式(Dont qualify headings)全站统一定义一遍heading元素即可若需额外定制样式可使用其他选择符作为代替。不重复定义h1~h6元素(Heading styles should only be defined once)值为0时不需要任何单位(Zero values dont 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不要和widthheightfloatmargin,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!个人观点虽然不是很智能但是对于初学者还是很有帮助的