Nicholas Zakas and I spoke at Velocity a few minutes ago. First we talked about CSS 3 and it’s impact on performance, then we demoed and open sourced CSS Lint! I really couldn’t be more excited (or relieved, I was super duper nervous before this presentation).
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
Rules currently tested
- Parsing errors should be fixed
- Don’t use adjoining classes
- Remove empty rules
- Use correct properties for a display
- Don’t use too many floats
- Don’t use too many web fonts
- Don’t use too may font-size declarations
- Don’t use IDs in selectors
- Don’t qualify headings
- Heading elements should have a consistent appearance across a site.
- Heading styles should only be defined once
- Be careful using width: 100%
- Zero values don’t need units
- Vendor prefixed properties should also have the standard
- CSS gradients require all browser prefixes
- Avoid selectors that look like regular expressions
- Beware of broken box models
(We’ll allow you to turn off rules that hurt your feelings soon!)
Many people have expressed an interest in contributing to the CSS Lint project. We were waiting to have a solid plugable architecture and API before taking contributions. The exciting news is that we are now ready! There are several ways you can contribute:
- If you are comfortable with CSS, submit rule ideas. You must provide the rule name, a human readable explanation, browsers affected, and a test case.
- If you are comfortable with Node, test out the command line version, submit feature requests.
CSS Lint for Node.js
If you’d like a command line version of CSS Lint, you can install CSS Lint for Node.js using npm using the following:
sudo npm install -g csslint
Once installed, you can pass in any number of CSS files or directories containing CSS files to see the results. For example:
csslint test.css dir_of_css/ test2.css
You’ll receive the same errors and warnings as you would with the web interface.