css lint是有害的

CSS LINT,优化你的CSS样式表 这篇文章我们详细的介绍到了关于css的一些使用建议,于是我最近开始使用brackets并且安装了csslint的扩展来检查css的样式问题,发现自己的css都有一些错误提示,现在回过头来看,其实csslint有些观点是不正确的,甚至是有害的。下面是这些有害的地方。

1.不要使用相邻的类

比如你的css是.classone.classtwo{}

如果你在意IE6的表现,那么这个规则是好的,否则就是废话,因为其他浏览器都是可以处理的。

一般我们这样子写是处于代码的重用,使用这个规则,可以尽量的减少css的代码量,这不就是我们正在追求的CSS性能问题吗?如果你实在需要IE6,可以使用jquery代码修复

$(“classone.classtwo”).addClass(“ie6-classoneandtwo”);

2.不要使用太多的浮动

csslint会计算你的页面使用了多少浮动,忽略它。

3.不要使用太多的网络字体

csslint它只会计算你一个样式表里面定义了多少个字体样式,它不涉及到有多少个字体被使用或者一个页面你载入了多少字体,当然载入更多的网络字体会拖慢你的载入速度。

4.不用使用太多的字体大小声明

其实一个页面的字体设计主要来自于设计图,我们根本不知道设计师会怎么设计这个页面,所以请忽视这条声明。

5.不要在选择器上使用ID

这条规则来自于作者的面对对象CSS的理解。面向对象CSS,使用正确的方法是很好的。但是建议你不要使用ID绝对是胡扯的。ID是非常有用的,你绝对应该使用它们,它们是一个浏览器可以选择一个给定元素的最快方法。它们同时还是一个页面中的锚点,如果已经存在,你可以在风格中挂钩。

6.不合格的标题

7.标题的元素应该保持一致外观

8.标题的样式应该只定义一次

最后:表现是一个浏览器的层次问题,它不应是HTML/CSS来修复或者变通解决,只要我们创作有效和有意义的HTML和CSS,那么我们就可以不必理会那些荒谬的规则。如果你想优化你的HTML和CSS,那么你可以结合你的最佳实践,而不是通过改变表现。

参考英文:CSS Lint is harmful ,没有完全翻译中文,个人理解,强烈建议英文好的同学自己读原文。蔡宝坚版权所有,请不要转载。


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流