Web Service Review: CSS Lint – Helping You Code Better

Posted in Tools, Web Design2 years ago • Written by 5 Comments

Coding is something that takes time to learn and novice developers might not use the best practices when converting web interfaces from a Photoshop file into a fully functional web site. It would be really good to have access to an experience programmer, but not everybody can afford to hire one or knows someone that is with spare time.

So you might ask yourself what to do to improve the code before delivering a web page. Well, lucky you, there is a tool out there which I will review for you today. The tool is called CSS Lint, it is totally free and I definitely recommend trying it and see what you can get out of it. The difference between a good and a great programmer is all in the small details CSS Lint can fix for you – or, at least, can tell you to fix them and why.

CSS Lint is an open source application that checks your code syntax and, according to the latest web standards, gives you a list of mistakes it spotted in your CSS code. It is similar to the W3C Validator, only it gives you better descriptions of your issues and offers suggestions about how to solve them. The tool is very easy to use. The only thing you have to do is paste the source code and choose the rules you want to be enforced (and there are lots of them). CSS Lint will start analyzing your code immediately after you hit the lint button and it will not take too much time until you will see a full preview of how good your code is.

The rules


As said before, you can choose your code to be checked by certain rules and I will give you a list with all the rules you can choose from.

1. Errors

  • Beware of broken box sizing.
  • Require properties appropriate for display.
  • Disallow duplicate properties.
  • Disallow empty rules.
  • Require use of known properties

2. Compatibility

  • Disallow adjoining classes.
  • Disallow box-sizing.
  • Require compatible vendor prefixes.
  • Require all gradient definitions.
  • Disallow negative text-indent.
  • Require standard property with vendor prefix.
  • Require fallback colors.

3. Performance

  • Don’t use too many web fonts.
  • Disallow @import.
  • Disallow duplicate background images (new feature)
  • Disallow selectors that look like regexs.
  • Disallow universal selector.
  • Disallow units for 0 values.
  • Disallow overqualified elements.
  • Require shorthand properties.

4. Maintainability and duplication

  • Disallow too many floats.
  • Don’t use too many font sizes.
  • Disallow IDs in selectors.
  • Disallow !important.

5. Accessibility

  • Disallow outline: none.

6. OOCSS

  • Disallow qualified headings.
  • Heading should only be defined once

The good part about any of these rules is that CSS Lint gives you a full explanation of each of them and, in most of the cases, recommendations on how to improve your code and keep the same functions, but avoid the specific mistake you made.

All these rules definitely make sense, but there is no time to take a look at all of them, so I will choose the most important and give you an explanation about why it’s a mistake to use them, and also some tips about how to replace them with valid code. This is only to give you a preview of the tool, you can obviously dig into it more later.

Disallow duplicate properties

A few years ago assigning the same property to a container was a mistake, although it is not considered one today. Today this is used as a way to deal with varying levels of browser support for CSS properties. There are browsers out there which support RGBA colors and there are some that do not, so a snippet like the following one would be accepted:

. container { background: #000; background: rgba (255, 255, 255, 0.5); }

Moreover, the following lines are also OK:

. container { border: 1px solid black; border: 1px solid red; }

However, this is not accepted and is puts up a warning when the two properties are separated by another different one or when the properties have the same value:

.container { border: 1px solid black; border: 1px solid black; }

or

.container { border: 1px solid black; color: red; border: 1px solid black; }

Require use of known properties

As more and more properties are accepted in a CSS file, this rule makes sure you don’t have any typos in your code. It is like spelling check in Microsoft Word. This rule checks each property name and makes sure it is a known CSS property. If there is a vendor-prefixed property (the ones beginning with a -), they are ignored by the tool, because they may add in their own properties. A normal CSS validator would warn when such a property is used (-moz-border-radius sound familiar?), because it doesn’t recognize the name, but CSS Lint doesn’t.

a { color: red; } would be accepted, but a { colr: red; } would be displayed as a warning, because the property colr does not exist. The following snippet: a { -moz-foo: bar; } would not be displayed as a warning.

Don’t use too many web fonts

Using too many web fonts is clearly bad technique, not only from a design perspective, but also from an accessibility and usability point of view. A web page that has to load more than one (maximum two) web fonts at every refresh is going to load very slowly and we know how this affects the user experience on a site.

Web fonts should not be overused.

The tool searches for the popular @font-face property and warns you when there are more than five of them. However, I personally don’t recommend you use more than one and, if you can, try to avoid using them at all.

Disallow too many floats

The float property is used to achieve a columnar layout in CSS. Some of us have been thought we have to use as many floats  as possible to ensure everything stays in place, but this is not the case anymore. Today there are lots of grid systems out there which you can download and they do not have an excess of this property. They are also made by expert developers and do not have usability flaws. The 960 Grid System and The Grid System are two incredible grid generators and I recommend you check them if you haven’t already.

Moreover, using one of these grid systems will decrease the amount of code you have to write yourself, which will help you deliver the web site faster and make the final product better.

CSS Lint warns you when there are more than 10 floats used (which is something most of the designers already use when they create the basic layout). Analyzes have been made and it seems the grid systems improve web site performance (source), so why not take advantage of them?

Don’t use too many font-size declarations

If your website is well-organized, then it probably has a small set of font sizes. However, many designers prefer to use a clearly visible hierarchy and do this by playing with the font sizes. Well, this would not be a problem either if developers would code it properly. Instead of using font-size 15 times, define three classes and use each one of them five times. To better illustrate, take a look at the code below:

.small { font-size: 10px; }

.medium { font-size: 13px; }

.big { font-size: 16px; }

The font-size property should not be overused - try classes instead. Image from: www.dtelepathy.com

This way, instead of declaring the size of the font 15 times, just point the container to a class. This is known to be much faster and to improve the loading speed of your web page. If there are more than 10 font-size properties used in your CSS file, this tool will show you a warning and a description of the issue.

Disallow !important

The !important property is used to increase the specificity of a given property value. If a web page has many instances of this property, it is a clear sign that the developer uses it because he has problems styling the page effectively. Therefore, CSS Lint displays a warning when the !important property is used.

Heading should be defined only once

The heading is an Object-Oriented CSS (OOCSS) which works by defining certain objects that can be used to place a particular object anywhere on a web page and display the same. For example, the heading elements (h1 to h6) are built-in objects and should look the same wherever they appear. This means developers are not allowed to define the same element multiple times.

The following code displays as a warning:

h3 { font-weight: normal; }

.box h3 { font-weight: bold; }

As you can see, the h3 has been defined twice, once for general use and once when used together with the class called box. This is not allowed! However, headings can be defined more than once when the hover property is used:

h3 { font-weight: normal; }

h3:hover { font-weight: bold; }

CSS Lint is nothing more than a tool


The bottom line is that CSS Lint should be taken as what it is – a tool. This means that no developer should code like this tool wants only because it says so. There are some rules that developers might not agree with (like the controversial OOCSS rules) and nobody forces you to use this tool as a Bible. CSS Lint should only be a tool to help you if you want to know where you can improve. None of us like to find out that we have issues in the way we code – so some of us might reject it.

So, the conclusion?


Even though there are some issues with it, I think CSS Lint is a tool you should start using. None of the ways of coding is the best one, unless we think it is for the purpose of our project. If you think you’re doing everything right, then so be it. Otherwise just try to use CSS Lint a few times and see if it improves your results. If it does, it might be worth to stick with it.

CSS Lint is also a very good way for beginner developers to learn more about the way they code and the way they should do it. There is nothing wrong with that and it is never too late to learn something new.

Do you think CSS Lint is useful? Did you know about it or have you used it? Did it improve the way you code or the loading speed of your website? Or was it a waste of time?

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

5 Comments Best Comments First
  • Ernst

    Saturday, January 14th, 2012 15:10

    1

    I disagree on “Heading should be defined only once”
    h1, h2, etc. is used to structure the document, not for formatting purposes.
    Hence when a side-box has some text, it should be perfectly legal to structure it with headings, but with other (visual) formatting than the main story.
    By disallowing multiple definitions for h1 and h2, a web-designer might see himself forced to introduce styles (instead of structure), thus taking away the structure of the text. This gives problems with automatically processing the texts, e.g. by read-aloud software for blind people.

    0
  • Joe Zim

    Sunday, January 15th, 2012 08:24

    2

    Very nice. I’ve been using JS Lint for a long while. Maybe I should try CSS Lint too.

    0
  • Helen

    Sunday, January 15th, 2012 17:09

    3

    CSS lint is a great tool, helpful for the webmaster. You can use this tool for your site.

    0
  • Bharat Mandava

    Monday, January 16th, 2012 08:40

    4

    OMG, complete info related to common CSS bugs, will use that tool for sure, mainly it helps me to design better for IE

    0
  • Florin Aeros

    Friday, April 20th, 2012 19:30

    5

    Is not very important how many times you use h1, h2 or h6, is important that to be relevant and unique for Google! So the content is the most important!

    0
  • Florin Aeros

    Friday, April 20th, 2012 19:30

    5

    Is not very important how many times you use h1, h2 or h6, is important that to be relevant and unique for Google! So the content is the most important!

    0
  • Bharat Mandava

    Monday, January 16th, 2012 08:40

    4

    OMG, complete info related to common CSS bugs, will use that tool for sure, mainly it helps me to design better for IE

    0
  • Helen

    Sunday, January 15th, 2012 17:09

    3

    CSS lint is a great tool, helpful for the webmaster. You can use this tool for your site.

    0
  • Joe Zim

    Sunday, January 15th, 2012 08:24

    2

    Very nice. I’ve been using JS Lint for a long while. Maybe I should try CSS Lint too.

    0
  • Ernst

    Saturday, January 14th, 2012 15:10

    1

    I disagree on “Heading should be defined only once”
    h1, h2, etc. is used to structure the document, not for formatting purposes.
    Hence when a side-box has some text, it should be perfectly legal to structure it with headings, but with other (visual) formatting than the main story.
    By disallowing multiple definitions for h1 and h2, a web-designer might see himself forced to introduce styles (instead of structure), thus taking away the structure of the text. This gives problems with automatically processing the texts, e.g. by read-aloud software for blind people.

    0

Comments are closed.

54.205.160.82 - unknown - unknown - US