I was just browsing through my tweets and came across this little gem as put forward my Nate Abele; he of CakePHP lead developer fame...
It got me thinking about how I organise my CSS files and code, and as I have been writing a lot of CSS recently when developing Codaset, it made me realise that I have developed a bit of a habit with my own CSS. So I thought I'd share it all with you.
Over the last year or so, there seems to have been an explosion of CSS frameworks. I suppose it was inevitable really, as it happened with Javascript, so why not CSS. ANd to be honest, I would say that is a good thing, and there are some decent ones out there. But my CSS framework of choice is the excellent Blueprint framework. It's a great starting point for all your CSS, and sets some good reset points. It's also very lite-weight.
Before I continue, I just want to say that I will not be telling you how to use Blueprint or indeed, how to write CSS. I use Blueprint's grid classes, but again, I won't be talking about them. This post is more about how I use a class based system for my CSS.
First, if I don't already have one, I create a css directory within my public root, the place Blueprint's three CSS base files within a sub-directory. I usually call that blueprint. (surprise, surprise). Then I create two files within my css directory called base.css and site.css.
I've used this structure for this site:
Pretty obvious so far! Now let me explain what I do with the base.css and site.css file.
base.css
Blueprint has a great set of resets or default styles, but sometimes, I want to overwrite these. I also find myself writing my own default styles, so I put all these within the base.css file. A simple rule of thumb is that only classes are allowed in the base.css file.
Since I started using Blueprint, I've started using it's default classes a lot. Classes such as .quiet and .small make it very obvious what I am doing to a particular element. So if I want told make a line of text a little smaller, I can simply wrap the text with a div or a span, and give that div or a span a class of small:
<div class="small">
Here is some text I made a little smaller than the rest.
</div>
If I wanted it to be colored a little lighter too, then I can add another class to the div:
<div class="small quiet">
Here is some text I made a little smaller than the rest, and it's quieter.
</div>
Both those classes and more are all ready to go as part of Blueprint. But I know also want to make this text bold. So I could either give this div an id and create a CSS rule for that new ID like this:
#myNewDiv {
font-weight: bold;
}
<div class="small quiet" id="myNewDiv">
Here is some text I made a little smaller than the rest, and it's quieter and now bolded.
</div>
But that's a bit daft, as I am likely to want to make other elements bold. So a new class would be better:
.bold {
font-weight: bold;
}
<div class="small quiet bold">
Here is some text I made a little smaller than the rest, and it's quieter and now bolded.
</div>
Now I could easily have given this div an ID instead and done away with all the classes completely. But again, that isn't reusable. Another thing I like about the above, is that is very readable and obvious what the classes are doing. It's very expressive, and even makes it very easy and fast to style, as all I need to do is assign a few classes, rather than creating any new CSS styles. It's like a pick and mix for CSS!
So I'm now finding that my HTML is full of classes, and I'm seeing less and less ID's. I only tend to use an ID to style an element if that element is more complex, or has specific needs that are not used elsewhere.
site.css
So the site.css file is therefore used for element specific styling. So any CSS styles that are defined with an ID, are placed in this file. Not much more to say about that actually.
For more about how it all fits in, check out the source and CSS of this site and of . I would love to know your thoughts and feedback on this. Comment away...
Codaset