Write Smarter CSS!
I’d like to share with you a simple way to write CSS in a smarter/more efficient way. I’m just beginning to design my website and currently at the point where I’m floating my sidebar next to my content. If you’re unfamiliar with this technique, then read my article on the perfect two column layout – otherwise, you’ll know that both the sidebar and content will need to be floated left. For this specific example, the content will be 70% in width leaving the sidebar to fulfill the remaining 30%. To make the example effective and realistic, the sidebar and content will also have a solid 2 pixel top border. First I’ll show you a bad example then an okay example… and last I’ll show you what I think would be the most logical way.
1 2 3 4 5 6 7 8 9 10 11 | /* bad example */ #content { float:left; border-top:2px solid #000; width:70%; } #sidebar { width:30%; border-top:2px solid #000; float:left; } |
The above example is not very good. I’ll explain why; in most programming languages elimination of repetition is usually ideal (don’t repeat yourself). As you can see I’ve defined float:left; and border-top:2px solid #000; for both the #sidebar and #content – which means I’m repeating each attribute twice. To avoid the repetition, I need only to place one instance of the attribute into what’s called a concatenated or combined style. One benefit of this technique will allow making changes to the #content and #sidebar easier. If later I decided I want to change to a one pixel border I would only have to edit the attribute in one place. Another benefit would be that I’ve reduced several lines of code therefore decreasing the time a browser takes in loading my stylesheet. You may have also noticed that I’ve placed the whole style onto one line. If I only have a few different attributes to put into a particular style – I tend to keep it all on one line. This can also benefit you by increasing your code’s readability as well as the overall management of your stylesheet in general.
1 2 3 4 | /* we're getting there */ #content, #sidebar { float:left; border-top:2px solid #000; } #content { width:70%; } #sidebar { width:30%; } |
But that’s not enough for me! Remember what I said about repeating yourself? Since I’m already calling the #content (line 2) once there’s no reason to call it again – it’s unnecessary and extraneous. I can simply throw all of the attributes that I’ve placed in the second #content (line 3) in the above example into the first time I called it along with the #sidebar (line 2). Ah, yes that means that our #sidebar would gain a width of 70% since it’s concatenated alongside the #content therefore breaking my layout! We need a total combined width of 100% and can achieve this with use of overriding to nullify the #content specific attributes I’ve thrown into the concatenated style to reduce repetition. Take a look at the next example to understand the concept.
1 2 3 | /* smart example */ #content , #sidebar { border-top:2px solid #000;float:left; width:70%; } #sidebar { width:30%; } |
In the above example, the second time I called the #sidebar (line 3) CSS knows to ignore the first time (line 2) and that is overriding in action. I’ve successfully reduced my first example from a total line count of 10 (149 characters) to a minor line count of 2 (96 characters). Finally – it’s alphabetized. And that’s probably a little too much.
Important: In the above example, the styles #content, #sidebar and the second #sidebar are both at the same specificity. If for example our code looked like the next example however the attribute that I wanted the #sidebar to override (the width) would not work. This is because the first time I called #sidebar now has a higher specificity with the addition of body in front of it. If you’re getting dizzy – read more about specificity.
1 2 | #content , body #sidebar { border-top:2px solid #000;float:left; width:70%; } #sidebar { width:30%; } |
It is important to realize that you can go too far. Use concepts like concatenation and overriding in combination to create more logical and faster parsing code. But sometimes it’s not the smartest choice and can cause more of a hassle than help. Just find a balance and you’ll be set.