How to write elegant CSS without "undoing" styles?

HTML & CSS
1

Hey guys, yesterday I found this post that goes over some of the ways to spot bad CSS code. One of the things the author says is that “undoing” styles is bad practice. For example, if you’re using declarations like


border: 0;
padding: 0;
float: none;
margin-left: 0;

Outside of a CSS reset, that means you applied the styles too early. This is something that I’ve never heard before, but now I can’t shake the feeling that I should rewrite my site’s CSS to be more efficient should a redesign ever be necessary (which it obviously will at some point)

The one thing I can’t understand, and can’t find anything else on, is this: does this suggestion apply only to undoing styles entirely, or should we avoid overriding styles too? My understanding was that the purpose of the CSS cascade was to allow us to override earlier styles rather than creating more selectors than necessary.

For example, say we want EVERY <h1> tag on an entire page to be black, 2em tall, and have a border to the left. Just an example.


h1 {
     font-size: 2em;
     border-left: 5px solid #000
     color: #000
}

Then, later in development, we find that we want another h1 on the page, just one, to have a different colored border. Like this:


h1.derp {
     border-color: #bada55
}

Or we may want to remove the border entirely:


h1.derp {
     border: 0
}

Are either of these really bad practice? Would it really be worth it, in your eyes, to go back and give a different class name to every OTHER <h1>, like this?


h1 {
     font-size: 2em;
     color: #000
     border: 5px solid
}

h1.herp {
     border-color: #000
}

h1.derp {
     border-color: #bada55
}

Sure, it’s cleaner CSS, but it seems like just overriding the original style would be cleaner HTML-wise.

This is obviously an extremely simple example, and in my style.css I have TONS of declarations that unset previous styles…which is probably what breaks my site when I try to use CSS minifiers.

What are your thoughts on this?

And just because, here is a link to my site’s CSS file (before the whitespace is stripped): https://dl.dropbox.com/u/87222573/style.css

If anyone wants to look through it and point out any glaring specificity mistakes, please do.

2

Lot of questions in there I try here. Your inevitably going to have to over write rules. So no worries there. To give different styles per h1 per page give the body tag a unique class name. Then…

.contact h1 {}

3

Yes I enjoyed that article also and have (and still are) guilty of some of the problems mentioned. :slight_smile:

The problem though is that it all depends on the context as there is no one size fits all approach.

If for example you have a small construct that is used in many places then you may want to set the styles for it right from the start. However on some pages you may not want it floated or have a border but the rest of the styles are to remain the same. Therefore it is more economic to undo the styles that you don’t want than to create unambiguous new rules. Of course if you are undoing all the rules then it probably should have been a unique element anyway. You have to balance the extra work of undoing styles to the extra work of adding new styles to work out which is most efficient and that depends on the job in hand.

You can sometimes sidestep the problem by using multiple classes so that you set the base styles with a class that you can use everywhere (color, appearance, basic structure etc) but then you can create new classes for the different behaviours (eg. floating, positioning, different borders). This is the opposite of “undoing” as it is additive and you add to the base styles when needed. The only problem though is that sometimes you can start adding a lot of classes which make the code hard to read and the html looks almost presentational.

In the end its a balancing act and choosing the right approach for the task in hand.