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在本地试跑了一下,给出的提示简洁明了:

a67f2cf2fff0e59292aaa0d325de7b3a.png

目前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会给出警告

a41787a1ce0a77bc6998fe6a1cbdbbe8.png

2.盒模型错误

好像width和height不能与padding和border同时使用,为什么会这样呢?很怪异

3643af54ba3c7db837c9759f69e30ca7.png

3.多余的标签

比如a.class,CSS Lint会建议你直接使用.class,如果使用了a.class,会警告

1e89cd0118d1b7f2d25ded081194dd99.png

4.显示属性错误

比如display:inline与float一起使用时,会警告

c0dcfe22036b4f629b8f373fdfdb9c76.png

看到这里,也许你会说这一款检测工具还不够成熟,的确,它的解析错误检测,空规则检测,属性值为0带单位的检测挺不错,其余的可能有一点差强人意,但它的 检测规则一直在不断丰富和完善中,同时你也可以提交规则,并且最重要的是,现在,你已经可以自己设置,关掉一些不需要的规则

417be8ccf185c788b3ee0c6ed978a6a6.png

这个时候,CSS Lint就会显得好用很多。

假以时日,我相信CSS Lint会越来越强大的。More and more Strong, Smart and Useful!

个人观点:虽然不是很智能,但是对于初学者还是很有帮助的!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++之菱形继承

前天和大学室友吃烧烤,其中谈到菱形继承的问题,突然发现脑中对这个几乎空白,所以晚上回来就上网搜了搜,言归正传,说到菱形继承,就要说到虚继承的概念,对于虚继承,就是为了解决从不同…

LeetCode 1506. Find Root of N-Ary Tree(异或)

文章目录1. 题目2. 解题1. 题目 Given all the nodes of an N-ary tree as an array Node[] tree where each node has a unique value. Find and return the root of the N-ary tree. Follow up: Could you solve this problem in constant space complexity with a linea…

客户端与服务器之间的文件传输,客户端与服务器的文件传输

客户端与服务器的文件传输 内容精选换一换使用FTP上传文件时,写入失败,文件传输失败。该文档适用于Windows系统上的FTP服务。FTP服务端在NAT环境下,客户端需使用被动模式连接服务端。在这种情况下,服务端的IP地址无法从路由器外部…

LeetCode 280. 摆动排序

文章目录1. 题目2. 解题1. 题目 给你一个无序的数组 nums, 将该数字 原地 重排后使得 nums[0] < nums[1] > nums[2] < nums[3]...。 示例: 输入: nums [3,5,2,1,6,4] 输出: 一个可能的解答是 [3,5,1,6,2,4]来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链…

复制文本框内容至剪贴板

1 <body> 2 <form id"form1" runat"server"> 3 <div> 4 <textarea id"txtArea" cols"30" rows"3">我是一个文本&#xff0c;Hello World&#xff01;</textarea><br />…

js动态添加控件服务器响应,JS实现动态给标签控件添加事件的方法示例

本文实例讲述了JS实现动态给标签控件添加事件的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">function set() {var obj document.getElementById("fy");//obj.attach…

LeetCode 683. K 个空花盆(set/滑动窗口)

文章目录1. 题目2. 解题2.1 set 有序2.2 滑动窗口1. 题目 花园里有 N 个花盆&#xff0c;每个花盆里都有一朵花。 这 N 朵花会在 N 天内依次开放&#xff0c;每天有且仅有一朵花会开放并且会一直盛开下去。 给定一个数组 flowers 包含从 1 到 N 的数字&#xff0c;每个数字表…

(转)一步一步Asp.Net MVC系列_权限管理设计起始篇

原文地址&#xff1a;http://www.cnblogs.com/mysweet/archive/2012/07/26/2610793.html前一段时间,写了一步一步asp.net的一系列博客,最近,也快要大四,忙着准备找个工作,这也算是最后一个假期了,这个系列可能不太长,尽量写完.还是多学习,少扯淡的风格,我们的学习还好继续,现在…

无盘服务器 机械盘,Win7启动速度研究,同样的PC配置,机械盘、固态盘、无盘网络启动速度为何不同?...

别装深沉了&#xff0c;赶快来凑凑热闹吧&#xff01;您需要 登录 才可以下载或查看&#xff0c;没有帐号&#xff1f;立即注册x一、环境&#xff1a;一台台式机(映泰B85、i5-4590、16G内存、三星、Intel固态盘、Realtek网卡)&#xff1b;一台笔记本(T440P、8G内存、三星、Inte…

LeetCode 681. 最近时刻

文章目录1. 题目2. 解题1. 题目 给定一个形如 “HH:MM” 表示的时刻&#xff0c;利用当前出现过的数字构造下一个距离当前时间最近的时刻。每个出现数字都可以被无限次使用。 你可以认为给定的字符串一定是合法的。 例如&#xff0c;“01:34” 和 “12:09” 是合法的&#xf…

指针和对象

使用对象指针时&#xff0c;需要注意几点&#xff1a; 使用常规表示法来声明指向对象的指针&#xff1a; String *glamour&#xff1b; 可以将指针初始化为指向已有的对像&#xff1a; String *first&saying[0]&#xff1b; 可以使用new来初始化指针&#xff1a; String…

最右显示请求服务器不存在,修改合流任务_实时音视频 RTC_服务端API参考_合流任务管理_华为云...

响应示例状态码&#xff1a; 200修改成功{"jobs" : [ {"job_id" : "607824b4fa163e19fe301cc817dda855","job_unique_id" : "707e5bfb1ccf4eef","stream_name" : "m_607824b4fa163e19fe301cc817dda855_gigu&…

[Hands On ML] 5. 支持向量机

文章目录1. 线性支持向量机分类2. 非线性支持向量机分类2.1 多项式核2.2 高斯 RBF 核3. 支持向量机回归4. 原理本文为《机器学习实战&#xff1a;基于Scikit-Learn和TensorFlow》的读书笔记。 中文翻译参考 SVM 特别适合应用于复杂但中小规模数据集的分类问题。 可参考&#…

网络流sap需要注意的地方

int sap(){memset(level, 0, sizeof level);memset(gap, 0, sizeof gap);memset(cur, 0, sizeof cur);int u pre[s] s;int aug inf;gap[s] n;这个要使源点gap值为点个数int v;int flow 0;while(level[s] < n){for(v cur[u]; v < n; v ){if(c[u][v] > 0 &&am…

LeetCode 340. 至多包含 K 个不同字符的最长子串(滑动窗口)

文章目录1. 题目2. 解题1. 题目 给定一个字符串 s &#xff0c;找出 至多 包含 k 个不同字符的最长子串 T。 示例 1: 输入: s "eceba", k 2 输出: 3 解释: 则 T 为 "ece"&#xff0c;所以长度为 3。示例 2: 输入: s "aa", k 1 输出: 2 解释…

麦森数(转)

1 //形如2n-1的素数称为麦森数&#xff0c;这时n一定也是个素数。但反过来不一定&#xff0c;即如果n是个素数。2n-1不一定也是素数。2 3 #include<iostream>4 #include<cmath>5 #include<cstdio>6 #include<cstring>7 #define N 1268 using name…

LeetCode 616. 给字符串添加加粗标签(Trie树)

文章目录1. 题目2. 解题1. 题目 给一个字符串 s 和一个字符串列表 dict &#xff0c;你需要将在字符串列表中出现过的 s 的子串添加加粗闭合标签 <b> 和 </b> 。 如果两个子串有重叠部分&#xff0c;你需要把它们一起用一个闭合标签包围起来。 同理&#xff0c;如…

var与dynamic区别

注意&#xff1a;var与dynamic这两个关键字&#xff0c;只是看起来很相 似&#xff0c;仅此而已&#xff01; var表示“变量的类型是在编译时决定的”&#xff0c;但是dynamic表 示“变量的类型是在运行时决定的”。因此&#xff0c;dynamic与var具有截然不同的含义。 var让 …

LeetCode 158. 用 Read4 读取 N 个字符 II

文章目录1. 题目2. 解题1. 题目 给你一个文件&#xff0c;并且该文件只能通过给定的 read4 方法来读取&#xff0c;请实现一个方法使其能够读取 n 个字符。 注意&#xff1a;你的 read 方法可能会被调用多次。 read4 的定义&#xff1a; 参数类型: char[] buf返回类型: int …

小白学数据分析-----数据指标 累计用户数的使用

小白学数据分析--数据指标累计用户数的使用 累计用户数是指注册用户数的累计&#xff0c;即可以认为是新用户的累计。在一般的数据统计中&#xff0c;我们基本上都会涉及到这个指标&#xff0c;且这个指标是逐渐累加的&#xff0c;比如&#xff1a; 时间 注册…