名称叫做 fdlint,用来对 HTML/JS/CSS 代码进行扫描,找出一些不合理的地方。 做这个是因为我是前端开发工程师,团队 code review 的时候,发现有很多检查项目是可以用工具扫描的,于是就有了这个想法。
因为喜欢 ruby,就用 ruby 做了。我的 ruby 属于刚刚入门,幸好有高手相助,核心部分是另外一位牛人同事 (bencode) 一起写的,细心的可以看看 bencode 和我的提交记录,明显熟练程度很不一样,呵呵。开发的过程中学到了很多很多,之后会不断完善功能、重构代码。
项目主页:https://github.com/qhwa/fdlint
请提些意见吧!不管是代码上还是功能上的。
/* line 79, ../../app/assets/stylesheets/account.css.scss */ .signup_or_signin .login_left ul.form_wrapper li input#signup_button { ^ CSS 级联深度不能超过 4 层 ^ 页面级别样式不使用 id background-position: -320px -120px; } 为啥呀?请解释下捏
css 选择器层数太多会造成浏览器渲染性能降低,所以要尽量简化
这个选择器有 5 层
.signup_or_signin .login_left ul.form_wrapper li input#signup_button
实际上可以简化成一个
#signup_button
页面级别不使用 id 选择器,用 class 选择器可以更有扩展性
因为今后如果需要页面上复制这个模块,或者模块功能会迁移到别的页面去?用 id 就会带来潜在的风险。在 css3 和 jquery 的帮助下,把 class 用得好,可以实现和 id 一样的效果。
因此上面这个选择器可以用
.signup_or_signin input.signup_button
HTML 结构也做一下调整:
<input id="signup_button" type="button" ... />
=>
<input id="signup_button" class="signup_button" type="button" ... />