Keeping CSS tidy makes themers happy!

We all know the infamous style.css file, and how easy is open it up in your text editor and start to dump code in to the infinite and beyond. Even though things have changed a little bit with D6 and the .info file, look at your CSS for any given site and ask yourself, "is this what we really want, a huge file where we dump everything?" When you finish the first version of your theme, things may look nice. The CSS is clean, you have selectors grouped following your desired criteria, maybe you have some comments to help separate these groups, etc. But then another develper opens your file to make some edits, and the disaster has begun. The next developer is not going to go through the hundreds, or possibly thousands, of lines of code that you have added, just to have an idea where they should place his/her new selectors. That person doesn't even know if the new style is going to overwrite your work, so after the code is placed they do a quick look at the page, and if everything looks awesome, the work is done. But the work is not done! If you follow this technique, sooner or later you are going to end up with a big CSS file that is basically unsustainable, and your entire template crumbles apart, with overrides upon overrides! You start to see !important in places that really aren't. Don't despair, there's still a light at the end of the tunnel and I'm going to tell you how to get there.

Divide and Conquer

If we divided our code when we work with PHP, then why don't we do the same with CSS? Keeping your code divided in multiple files will help you to locate specific sections, and also to keep styles bundled into manageable portions, you won't end with unnecessary lines of code or with widowed styles. Dividing CSS code is not easy, and there is no perfect pattern to follow, but there are some logical steps to take. Here is a screen-shot of the directory structure that I used for one of our recent projects (you have to understand the structure may be different for each project but generally this is a good place to start):

/css: Keep all your CSS code within this directory. bp-reset.css: Resets all browser styles to a unique style. This is a technique that you should follow to avoid cross-browser issues. For this purpose I usually use the Blueprint reset file (that's why the "bp" prefix), but you can use any reset file that you like. content.css: Font family, default text colour, default link colour, font sizes for headings and paragraphs, etc. All your default/general content styles should go here. ie.css: Need I say more? Yes, all that extra code you need to make things look right in IE. No round corners via CSS in IE8, great! layout.css: The styles related to the general layout. This is where you tell the code: my page is centered on the screen, the header is always 200px high, the footer is anchored to the bottom, and the sidebar is placed on the left hand side. Keep it general! main.css: This is a tricky one, actually you don't want to add any styles here, as this file is used to import the rest of the files. Be aware that IE only accepts 30 @import clauses per file, so you may need to have more than one. Files that you would want to import here are things like: bp-reset.css, content.css, layout.css, and all the files under the tiles and modules directories. DO NOT import ie.css here, as we only want ie.css to be read by IE browsers, rather than always included. /modules: If you are styling the output of a specific module, keep the styles here, and give each module its own file. /tiles: Tiles are "pieces" of your website, some people call them "widgets", others "containers", and some neglect to categorize them entirely. The pager is a tile, a block is a tile, even a node is a tile—let's go over a few of this folder's directories and files for a better understanding:

• /forms: Use one file per form style, and all keep all of the form styles contained in this folder.
• /lists: I have expanded this directory so you can see an example of what's inside. This directory in particular has all the styles related with lists.
• lists.css: Common list styles should be placed here. In this scenario list-pager.css and list-quicklinks.css are both horizontal menus, although they don't share the same look/style. To create a horizontal menu you have to follow the same process for both of them, so it helps to keep all those pieces consistent using a class called "list-h" and then apply a second class that gives them the look that you want e.g. <ul class="list-quicklinks list-h">...</ul> By organizing it like this, you keep the code for .list-h in list.css and the code for .list-quicklinks in list-quicklinks.css.

/misc: Your grab-bag folder. A good place for files like: icons.css, buttons.css, etc. /nodes: If you are a themer who works with Drupal, you know what a node is...right? Well, maybe not. You might have gotten by without needing to know what a node really is. My best advice is to sit down with your favorite Drupal developer and get them to show you the ins and the outs of what a node really is and how it functions. And if you have node-specific styles, then add your file here. /wraps: Also called "wrappers", these are the containers that you've used to encapsulate your code. Create one file per wrapper in this directory. This is just an overview of how I tackle keeping my CSS organized, and you will certainly need to adjust the system to what works for you or a specific project, but this should give you general idea of the ideal way to structure your CSS code without falling into the black hole of TLDNR. Every system has room for improvements, so feedback is welcome, especially if you have a nice solution for naming conventions. You can't imagine how difficult is to create class names that are not tied to the design; I know that color-00 is not the most memorable class name, but color-black is even worse!