July 3rd, 2007
CSS Structuring
I’ve often thought about which would be the best way to structure CSS, which would be the most beneficial way to make finding and editing quicker and easier.
Not to mention it may need to be easy to find for others using the style sheet for example.
Currently I style my sheets grouped in to sections; structure style, text styles, image styles and so on. Within each of those sections the elements are grouped in terms of their placement on the site (header values are at the top, content values beneath that, footer values at the bottom).
I had been considering using a different format of having the style sheet structured by elements then within each element section having all the values for that element.
The problem with this format is that I seldom see it used on sites, which makes me wonder if it is one of those “web design no-nos”. Having said that I did discover a WordPress theme which uses this formatting for the CSS which you can view here: CSS.txt
Perhaps the size of the site could be a factor here, if you have a small site with minimal CSS values then you wouldn’t need to be concerned so much with using the structuring provided in the example. However I do believe this kind of structure would be greatly beneficial for The D’ni Jazz Club which has a pretty large style sheet which has gotten muddled and confusing as I have added in test values that have ended up staying but not in their designated spots.
I am curious as to what the thoughts are of the fellow designers who read this blog are.
July 3rd, 2007 at 10:07 pm
I’ve always gone by type,
Tags at the top, then classes and finally id’s and then organised by which part of the site they are for. However like you I always seem to end up with unwanted values.
July 7th, 2007 at 4:26 pm
I organize my CSS based on content sections: header, sidebar, content, footer, etc. It makes sense to me, but even that can get unwieldy.