{Carrer web log}

Few words about CSS LINT

Tuesday, July 12, 2011 { 4 Comments }

CSS Lint is product of Nicole Sullivan and Nicholas Zakas.

CSS Lint hurt the feelings of many web designers in this couple of weeks. Many designers are confused what is CSS Lint.

I want try to explain some of the concepts behind CSS Lint.

CSS Lint is philosophy or method how you should create CSS. It is NOT just a tool that validate CSS.

Is CSS Lint right or wrong?

Or better question: Can sometimes CSSLint be better solution to my problem?

Answer: Yes, sometimes CSSLint philosophy can be better solution to your problem.

I want to elaborate about some of CSS Lint solution starting from my personal experience. I'm author of many CSS Frameworks mainly because of my obsession always to experiment with different things. One of the biggest challenges when you write CSS is the layout. CSS in the beginning was not projected for building layouts. The same goes for HTML.
So every layout on the web is some sort of hack.

In the beginning we use HTML Tables like hack, then we decided to separate the layout from presentation by using CSS. Basically with CSS2 we are doing floats or positioning. In most of the cases we use floats. Floats with combination of elements, ID's and Classes are the basic construct of many web sites. We can use various construct combination for achieving the same goal.

Back in 2008 I wanted to build CSS framework that will be lightweight, flexible and resizable. And that was the challenge to resolve some CSS architectural problems.
Many CSS frameworks then had div.grid1 names in my opinion it was more logical to use just .grid1 to style not just the div but any element. That is one of the things that CSS Lint is telling you use .class that is not bound with any specific element.

Other thing that CSSLint is telling you is: Don't use ID's like selectors.

I think that was the main reason why people didn't like CSS Lint. 99% of all CSS sites are using ID's so suddenly everybody is wrong. And this is how the people react when they are told that are wrong?

But what really CSSLint is trying to say is: "In some cases it is smarter to use classes".

And what case would that be?

And what case would that be?

If you have things that are repeating over and over and over again, optimize and use class.

IMHO CSSLint should seriously consider changing their error log message system:

Before: Don't use IDs in selectors.

After: In some cases consider to use Classes instead of ID's in selectors. Classes are more flexible.

I will try to write two examples one with ID the other with class.

The example with the classical use of ID (open the source code)

The example with use of class (open the source code)

With the class example we have just one of code and with the ID example much more CSS. This is maybe not a perfect example but I think you get the picture.

Many people point out that ID are faster then Class. According to this test class are faster or there is not significant difference with ID's. So the speed is not an issue.

CSSLint is also telling you: "Too many floats... Consider using a grid system instead."

I will add consider building your grid system. You can build 16 column system with just one line of CSS imagine what you can do with 2 lines of CSS. So if you have 20-30 floats I think you can optimize that by making your personal grid system.

Back to the real life use. When to use or not to use CSSLint philosophy.

It is always good practice to use less floats. Try to find the elements that are constantly repeating and optimize that. CSS Lint is just trying to force good old DRY(Don't repeat yourself) into CSS.

If you have small site with the same structure like same header, footer, sidebar, navigation. Is perfectly fine and very logical to use just ID's. You will gain no big improvements with CSS Lint philosophy.

But if you have a site that have to handle multiple layouts and has complex layout consider using Classes and maybe building your own CSS Framework.

Using Classes doesn't necessary means that you have to build CSS Framework It means that you should optimize the repeating parts.

One of the biggest complains about the public CSS Frameworks is ugly non semantic Class names. Absolutely true. Because the general CSS Framework have to serve the general purpose they have general names.
But in your site specific project you can use your specific naming system and build your semantic(meaningful) system with Classes.

My advice is try to understand the CSS Lint dogma. Try to group the repeating parts.

Don't forget: "De gustibus non est disputandum". - “There is no arguing about taste.”

There are many philosophies how should develop your site, be aware of various opinions and options and choose what is best for you and your project.