Post Archive
› October 19, 2002
CSS Organization
All this talk about Wired's redesign (Zeldman, diveintomark.com, etc.) has prompted a question in me. How does a large scale web site manage its CSS files and definitions?
Using Liorean's Stylesheet Source Viewer I have been trolling both Wired's and [stop] design's CSS files. After digging under the hood of these two sites all I can say is WOW! It had never occured to me to structure my CSS by region. I have always listed definitions in order of HTML redefinitions, classes, and IDs. Nor had I known that CSS had a comment function (boy did I feel like a doofus).
So, how do you organize your CSS???
Comments
1. October 19, 2002 11:04 AM
2. October 19, 2002 12:45 PM
huphtur Posted…
- layout - font styles3. October 19, 2002 02:14 PM
Liorean Posted…
Hmm, I used a structure that is something like that at WCD. It makes creating and managing stylesheets so much simpler. (I created a lot of stylesheets for that page...)
Generally it’s best to keep the styles for a certain region, like the menu or the content in their own section in the stylesheets. Marked by comments, of course. If you have documents that radically will divert from that, I suggest you move their styles out to a separate stylesheet.
Also, I like keeping the theme info, like colours, fonts etc. separated into one stylesheet, and the layout and positioning in anohter stylesheet. Of course both stylesheets should be divided in exactly the same sections, so that oyu can easily see what info in one of the stylesheets corresponds to what info in another of the stylesheets.
4. October 19, 2002 02:22 PM
Liorean Posted…
Hmm, just as a side note, should the page title run:webgraphics : weblog : <acronym>CSS</acronym> Organisation?
Nathan Posted…
This is a really good question Dru. I seem to have fallen into the habbit of dividing my css sheets into styles for layout, some specific feature styles, and then a hodgepodge of other site styles. Overall though, my organization could use a lot more rhyme and reason, especially because I tend to just tack on new styles to the bottom of each css sheet–very messy. Looking forward to comments from anyone who has devised their own system.