It’s 2009, and while I’ve cleared up my desktop clutter, reassigned new icons to my folders, and archived projects from 2008, there’s something that remains unchecked on my to-do list: clean up CSS code. See, I’ve got a bunch of CSS stylesheets that are live, powering different websites, that are shamefully, shamefully disorganized.
Now, the tidying up of CSS doesn’t sound sexy- and it isn’t. But a clean, well-organized stylesheet is a joy to behold. Especially when it’s five months later and time to make major style changes on a website you haven’t worked on, let alone thought about. With an organized stylesheet, there is very little chance of pulling one’s hair out while wondering why that font won’t change size or begging that sidebar to please, please move 20 pixels to the right.
The truth is, it isn’t very hard at all to tidy up the code on a stylesheet. Here are five quick ways to do it:
- Use sections. Title these. Organize all style definitions into sections, for example: Basic Page Styles, Links, Header, Content, Footer. Make sure to title each of these sections with headers. Yes, a bit of a pain, but oh how you’ll hug yourself later.
- Indent, indent, indent. I heart the tab button on my keyboard, especially when it helps me differentiate various rules (a column within a column, for example) in a stylesheet.
- Think semantic. When deciding what to name your CSS ids and classes, use names to properly identify them as they are (“navigation-menu”) rather than where they are (“top-bar”). That way, when you need to move the navigation menu from the top of the page to the bottom, it won’t suffer an identity crisis.
- Use shorthand. Learn CSS code shorthand (or, like me, use a cheat sheet) and use it. Because padding: 10px 0 5px 3px;is way better than
padding-top: 10px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 3px; - Use master stylesheets. As web designers, web browsers are our medium. Unfortunately, despite it being 2009, browsers still don’t all play nicely together. Minimize the risk of your lovely styles disappearing by using master stylesheets, which basically clear all default browser settings, giving you a clean slate to apply your styles on. You can see an example master stylesheet here.
There are, of course, many other ways to organize your CSS stylesheets- and I’m a firm believer that everyone should use the organizational system that works for them. It might be good to keep in mind, though, that unless you’re working on your personal website, there’s a chance that another designer will have to work with your stylesheet in the future. So be kind to that designer, and try not to be too cryptic. That designer could be you.
