Front-end Developers Tool: CSS Lint

For any inspiring front-end developers reading my blog, I want to give you a free tool to use. It’s called CSS Lint. CSS Lint points 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. It has rules that are pluggable, so you can easily write your own or omit ones you don’t want (text from here). But what does all this mean? It’s pretty simple.

CSS Lint Example Output
CSS Lint Example Output

CSS Lint takes our code and gives us suggestions to make it better. In the example above I took the CSS file that contains all of my CSS on this site. You can see that the first 3 lines relate to all browsers, while the ones underneath relate to specific versions of IE. CSS Lint gives us information like what line the issue is on, what the title of it is, like how Headings should only be defined once. It helps us to see what mistakes we make and gives us the lines to fix them.

This is a great tool for us front-end developers — even back-end developers that write front-end code — to have at our disposal. If you are working with a team, this is a must. Because you can set up your own rules to run against CSS Lint. Even the freelance web developer should look at using this. It’s always important that we continue to further our education and CSS Lin is a tool that can help us become better coders.

In this example, it is somewhat misleading because I’m using Headway, which writes code a little different than a web developer. These are just warnings though, not errors. You and your team could determine to fix warnings or leave them. Since this is my personal blog, I’ve chosen to leave the warnings alone and only fix errors. If you run my CSS, you should not find any errors.

I use this with every project I work on. I’ve integrated it with my development workflow. I use Sublime Text so using SublimeLinter is the best way this works. Using SublimeLinter is great because it works in the background as I write code. If I write something that is bad, it starts to point it out so I have the chance to fix it right then and there, compared to at a pull request time when I’m having my code reviewed by another developer.

Consider giving CSS Lint a try on your next project or some of your CSS code to see how you compare.

Free E-Mail Course on Automation

Learn 5 easy ways to start using automation in your workflow today, giving you time back in your schedule.