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 ,没有完全翻译中文,个人理解,强烈建议英文好的同学自己读原文。蔡宝坚版权所有,请不要转载。

时间: 2024-08-01 01:54:42

css lint是有害的的相关文章

CSS Lint

才疏学浅,刚听到CSS Lint这么个玩意,Lint翻译成汉语是“线头”之意,CSS Lint的大概意思是编写CSS过程中留下的线头和不好的地方.我们注意这些地方才能把衣服(CSS)做的更好!可以通过在线网站或者安装csslint来检测自己的文件,CSS Lint主要说的是一下几个方面: 不要使用多个class选择元素,如selector.a.b,在IE6下只会解析到最后一个class,也即是b: 移除空的css规则,如selector{}:我们可能在CSS中测试时会写一些最终不需要使用的CSS

CSS LINT,优化你的CSS样式表

CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题,使用方法很简单,只需要把 CSS 内容复制贴上,最后按下 LINT!按钮就可以检查.底下有一些设定项目可以调整检测的项目和规则,预设是全部勾取,如果没有特别的需求可以不用更动,完成之后 CSS Lint 会告诉使用者该样式表哪些部分发生问题,只要依照网站的指示修改就可以得到比较没有问题的 CSS 样式表啰! 网站名称:CSS Lint 网站链结:http://csslint.net/ 使用方法很简单,进入 CSS Lin

20个编写现代CSS代码的建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; margin-bottom: 40px; } .blue { background-color: #2

gulp css html image js 合并压缩

安装node.js  npm  以及安装gulp等方法我就不在这里赘述了. 接下里我主要介绍的是Gulpfile文件里面的配置该如何书写. var gulp = require('gulp');//引入gulp组件 // 引入组件//在引入这些组件前你需要在你的项目里进行安装.举个栗子:组件中间用空格隔开.一定要先切换到你项目所在的目录 //npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-d

css编码规范

https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/css-validator/ CSS Lint:http://csslint.net/ CSS Usage:https://addons.mozilla.org/en-us/firefox/addon/css-usage/

前端 CSS 规范大全

一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css/music/ 社区 /css/sns/ 小站 /css/site/ 同城 /css/locatio

CSS架构

Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.无需使用表格.尽可能少的使用图片.如果你是个名副其实的高 手,你可以快速把最新和最伟大的技术应用到你的项目中,比如媒体查询.过渡.滤镜.转换等.虽然这些都是一个真正的CSS高手所具备的,但CSS很少被人 单独拿出来讨论,或者用它去评估某个人的

10 款非常棒的CSS代码格式化工具推荐

如果你刚开始学习CSS,这意味着你的很多代码或结构可能需要优化,比如你可能过多使用了类.添加了多余的间隔或空行等等,这将导致代码臃肿.混乱,可读性和执行效率将大大降低. 本文为你整理了几款CSS工具,借助它们,你可以轻松写出漂亮的CSS代码. 1. CSS Lint 这是一个在线工具,可以帮助你检测CSS代码中的问题.该工具可以对一些基本的语法进行评估,并使用一套规则,以寻找有问题或效率低的代码. 2. CSS Compressor 这是一个有用的工具,可以帮助你压缩CSS,以提高加载速度和优化

CSS架构目标:预测、重用、扩展、维护

对于想踏入前端开发的工程师来说,通晓CSS(Cascading Style Sheets)则是最基本的要求.而擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.无需使用表格.尽可能少的使用图片.如果你是个名副其实的高手,你可以快速把最新和最伟大的技术应用到你的项目中,比如媒体查询.过渡.滤镜.转换等.虽然这些都是一个真正的CSS高手所具备的,但CSS很少被人单独拿出来讨论,或者用它去评估某个人的技能. 有趣的是,我们很少这样去评价其他语言.Rails开发人员并不