CSS best practices or traps?

Published Tuesday, October 18, 2011 8:32 PM

 

Have developed numerous web site now, big and small, fancy and dumb, started clean or jumped in middle way. Sometimes I was responsible for the whole site (front UI and backend database), sometimes just the UI side. A lot of times, css has been treated in a ad-hoc fashion, as a result, css has grown into a mass of snarling classes and elements with funny ids, living across a great many css pages. 

For example, 
(To be fair to myself, the classes are tweaks from Ext original ones.)


#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-1,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-2,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-3,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-4,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-5,
#tagReviewMrcContainergrid  .x-grid3-hd.x-grid3-cell.x-grid3-td-6
{
	
	background-image:url('../images/snipe-sprite.gif');
	background-position:right -91px;
	background-repeat:no-repeat;

} 

Now whenever the site needs a face-lift or extreme make over, the old css will be the first one to be under the knife, be patched, shifted, or discarded. Oh, boy, the giant octopus with great many arms, where do I even start?

Facebook has had the same problem, and fortunately they got a css master Nicole Sullivan that is keen on keeping css simple and organized. Facebook is decidedly complex and feature rich, however, it is also decidedly and has a deceivingly simple clean look. It's css is simple and pleasant to read:


table.component_table {
    padding-left: 5px;
    padding-top: 5px;
}
table.component_table td.icons {
    text-align: center;
    vertical-align: middle;
    width: 20px;
}
table.component_table td.content {
    white-space: nowrap;
    width: 200px;
}

What are the problems? What are the traps that we stepped into however she managed to escape

In a presentation at Webstock conference, Nicole laid out the problems and some principles. The problems are with the majority of sites are:

  • Duplication of property value pairs
  • Duplication of elements
  • Growing specificity

According to her, the so-called best practices are actually the traps that trapped us to those problems.

Yes, we ought to follow the best practices with a grain of salt. Yeah, like everything, too much of anything is not such a good thing.So the so-called best practices under attack are:

1. Classitis

Classes are our friends. Seeing a lot of IDs is actually very bad. Run from this kind of code:

 

However, when define classes, try not made classes too narrow or too broad. That is to say, both extreme micro-managing and macro-managing are bad. Balance is the key.

2. Never add an non-semantic element

You want your content to be marked up in beautiful HTML that uses a diverse set of tags like P, UL, OL, LI, H1-6, strong, em. Add a few extra wrapper elements to keep your content nicely cordoned off from your containers or separate out decorative flourishes! Your HTML will be clean and your CSS predictable.

3. Never add a non-semantic class

Never want a class like "bigRedText" or "giantRedText".

CSS needs abstractions. We need to be able to solve a particular problem really well, and then allow people to go on using that solution long afterward.

3. Use decadent selectors

Never has more terrible advice been given (ok, ok, I exaggerate, but for CSS, this is as bad as it gets). The descendent selector is *only* appropriate between multiple nodes of the same object (say, a tab container and its’ tabs), and even then, only when you are absolutely certain that there will never be any markup changes. Very hard to guarantee, no?

4. Sites need to look exactly the same in every browser

Yes, it would be nice to look fancy across all browsers, but not all browsers are created equal, that is why, you should give up forcing a round corner on IE 6, or making your site look exactly the same pixel by pixel.

 

See Also

Our (CSS) Best Practices Are Killing US

by xxxd
Filed under:

Comments

No Comments

This site

This Blog

Syndication

Sponsors

  • MaximumASP