大家都听说过jslint,eslint,不过你可能没见过csslint,你可能会问csslint有什么用,为什么今天要说csslint,是因为我在开发中遇到一个坑,其实之前不怎么使用csslint的,既然踩到坑了,就要解决。

是这么回事,我在写css的时候不小心在括号后面多写了一个分号,可能是习惯问题,以为在写js,就带上了一个分号,在我手机上(安卓6.0)运行没问题,结果老板说在他手机(安卓4.4)有问题,就是一个动画没有效果,我一开始想,我用了css3的新属性做动画,会不会是兼容性问题,我在Can i use查过transform,animation的兼容性,发现4.4是支持css3动画属性的。怎么想都不知道问题出在哪。我又不想用js去做动画,毕竟影响性能。没办法,找不到问题所在,于是我打算用js去做动画。正准备写js的时候,突然看到css代码多了分号,我去掉后结果就好了。

问题虽然解决了,我就在思考,如果后期开发中还会遇到这样的问题怎么办。于是我就想起来之前看到过csslint的文章,我去csslint官网检查了一下我的css代码,果然有问题。由于我的手机版本比较高,可能自动修复了错误。低版本的可能就报错了。

如果你的项目采用模块化,npm上面有csslint的插件,使用webpack打包工具可以整合csslint。如果不是模块化,你可以到csslint官网,直接把你的css代码粘贴,然后进行验证。csslint可以配置验证规则,你可以根据自己的需求进行配置。

所以以后开发尽量使用csslint去检查一下css代码的正确性。

csslint在前端项目中的使用的更多相关文章

  1. 前端项目中使用jsencrypt进行字段加密

    前端项目中使用jsencrypt进行字段加密. 使用步骤:①获取公钥②实例化对象③设置公钥④将所需数据进行加密然后返回. 进行一个简单的封装如下 /** * npm install jsencrypt ...

  2. 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表

    在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...

  3. 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

  4. 在Vue前端项目中,附件展示的自定义组件开发

    在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...

  5. 如何在前端项目中引用bootstrap less?

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

  6. 前端项目中gulp的使用

    在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中  C:\My Project\FrontEnd\TestBuilder 然后依次运 ...

  7. web前端项目中遇到的一些问题总结(08.23更新)

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 写一些最近工作中Vue项目中遇到的问题. 巴啦啦小魔仙,污卡拉,全身变,小 ...

  8. 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

  9. 前端项目中使用git来做分支和合并分支,管理生产版本

    最近由于公司前端团队扩招,虽然小小的三四团队开发,但是也出现了好多问题.最让人揪心的是代码的管理问题:公司最近把版本控制工具从svn升级为git.前端H5组目前对git的使用还不是很熟悉,出现额多次覆 ...

随机推荐

  1. Android O 正式版新功能

    ref: Android O新特性和行为变更总结zzhttp://www.cnblogs.com/bluestorm/p/7148134.html Android O正式版带来了诸多新功能,如Tens ...

  2. 那些ie6已支持的方法属性,成为事实标准。或者方便大家的api

    很多api,都是ie6实现,后来其他w3c或其他浏览器支持,或者用类似的方法模拟 onselectionchange  判断选区改变 ,chrome已支持 Element.contains   判断元 ...

  3. ubuntu 安装python3.6.6

    http://www.cnblogs.com/yhongji/p/9383857.html https://www.jianshu.com/p/1565f38f4236 ./configure --w ...

  4. D. Petya and Array 树状数组

    题意: 给出一个数组,元素有正有负有0,问其区间和小于 t 的子区间的个数. sum[ r ]-sum[ l-1 ]<t,其中sum是a的前缀和. 实现的方法就是从前往后对于每一个sum[ i ...

  5. tp 事务处理

    tp的事务开启是非常简单的, 只需要M()->startTrans();//开启事务,M()可以是M('xxx') $m->rollback();//事务回滚 $m->commit( ...

  6. python基础之collections模块

    Counter Counter是一个简单的计数器,可以统计一段字符串中各个元素出现的次数: import collections counter_1=collections.Counter('kjsd ...

  7. 使用uwsgi配置django

    1.uwsgi的安装 pip install uwsgi 2.uwsgi的基本测试: 创建一个test.py文件,内容如下: def application(env, start_response): ...

  8. ElastAlert监控日志告警Web攻击行为

    由于公司需要监控web攻击行为,而因某些原因搭不了waf,才不得不用ElastAlert进行告警,此为前提. 一.ELK安装 Elasticsearch 是一个分布式.可扩展.实时的搜索与数据分析引擎 ...

  9. ECMAScript6语法检查规范错误信息说明

    项目中使用ECMAScript6的时候经查会使用语法检查,下面是常见错误信息的汇总: “Missing semicolon.” : “缺少分号.”, “Use the function form of ...

  10. CSS3 颜色模式

    HSL .test{background-color:hsl(<length>, <percentage>, <percentage>);} 1.length 表示 ...