CSS Overload!
My life revolves around CSS. It is the beginning and it is the end of any design for me. Sure, there’s the conceptualization, the mock-up, the (X)HTML, the PHP, the Javascript and so on and so forth. But what it really comes down to is writing the CSS to bring everything together into something that people don’t hate looking at.
With all of this emphasis on the style sheet, it’s no wonder that CSS documents can multiply and bloat so much that, before you know it, you’ve lost track of everything! To combat this inevitability here’s a quick list of some things I try to do to keep things in order:
- Have a toolbox: there are probably at least 10 styles that every project can use; (.hilite or .clearing) Make a CSS file that contains all of your standard favorites so you don’t waste time recreating them for each project.
- Organize by function first, then location: Things like forms, posts, pull-quotes, and inline images have styles which need to be consistent across an entire site. Make separate style sheets that contain everything you need for each separate function. I often have css documents named forms.css, and articles.css. Then, when nessecary, I put page-specific styles into their own documents (eg. Mmain_page.css, faq.css).
- Cascade! It isn’t called CSS just because it’s fun to use TLA’s; probably the best way to optimize your css usage is to separate styles by function, and then layer them on to elements to get the desired styling. I often use separate styles for basic text formatting (font family, line-height) and then have other styles that I can layer on top of them (.bigger, .ital etc.) to get specific styles. The final product looks something like this:
which is a whole lot easier than making a class for the few occasions you need your paragraph text to be large, hilited, and italic
- Comment. Comment. Comment! – While separating styles into different functional style sheets can be a great way to help you remember where everything is, you can always make life easier on whoever is maintaining your site (which is most likely you!) by commenting when things start to get messy.
- Get Global. Besides your bag of tricks you’ll need a few global pages, I like to separate layout from presentation, so I usually have global_layout.css, and global_pres.css. global_layout.css would define how everything is layed out on the page by styling the sizes and positions of the core structure of the page. And global_pres.css would basically contain everything else, especially element styling that is not specific to certain pages.
- Don’t do the dirty work! If you are using a server-side language, make it work for you. When css files start adding up it’s a pain to make sure you’ve got them linked up on the right pages. I prefer to just have one stylesheet for each media style like so: then I have a script in ‘styles.php’ that serves up the right style sheets for each page. This also helps in optimization because you are only serving the data nessecary to view the page, and you can run compression algorithms using output buffering!
A little organization goes a long way, and while getting everything right in the beginning might take a little while longer, it will pay off in the end when you’ve got as much hair as you started with!