Write a well structured CSS file without becoming crazy

Big CSS files can be complex to manage but a good structured code can help you to make your life simpler.

This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases.
I experienced, proceeding without "order" or a clear vision about what you want to realize can be harmful and you risk to add, change, remove classes and properties, with the only result to have untidy code with a lot of unused elements on your final product.

Before you start writing directly CSS code, I suggest you to prepare a "draft" with all sections your site will have. Then follow these simple "rules" to optimize your work:

1. Be simple
2. Be "elegant-code" oriented
3. Be methodic

Be simple
Avoid everyting is not strictly necessary. Don't use six <div> layers if you can obtain the same result with only two. If you think a certain design structure is too complex to be realized with CSS probably you are mistaking something. Try to find another way to implement it. In general, almost everything is simple. We are too complex.

Be "elegant-code" oriented
Indent your code to highlight dependencies between CSS elements, use white spaces and comments to separate portions of code logically different. Use clear, in-line, comments like this:

Don't write a "book" about a div ID called #column-left. If you coose the right name, it's clear enough.

Be methodic
Use the same name to identify the same sections in all your projects (#logo, #navbar, #left-column, #footer...). Group CSS classes for typology and add CSS properties in alphabetical order for improve the readability. Once you find the right method to proceed, reuse it every time you work on a new project. So, the code will be more "familiar", more simple to manage and you'll write it more fastly.


Before start coding ask you: where do you want to go?
This is a good question you would to do before opening your preferred editing software. The only things you need now is a pencil, an eraser and a white paper where to trace a "draft" with all main sections of your site:

At this level, you have not to add too many details in your write-hand "draft": size (width) of every single element (in pixel or percentage), paddings, borders and margins are enough.

Let's go. But first reset CSS default browser styles
This practice reset the default browser style for HTML standard element (h1, p, ul, li...). Recently I read a lot of interesting post about this topic. I don't know you... but the only "common" tags I use in my project which required a "reset" are:

body, h1, h2, h3, p, ul, li, form

Nothing else. Very rarely table elements (<table>, <tr> and <td>). In any case, for a complete overview about CSS reset technique take a look at these links:

- Yahoo! UI Library: Reset CSS
- Eric's Archived Thoughts: Reset Reloaded

Start writing CSS code
Now, you are ready to proceed. My typical CSS code looks like this:

Nice, elegant and clear :) Because the code also has a certain charm!

Page structure
Ok, now you can start to design the site structure adding the main sections. If you prepared a "draft" with the site layout it's very fast. Whichever choice you do in terms of layout (liquid or fixed), I suggest you to define a class .container which set one time only, the width of all element which it contains. In this way, if you want to change the width of the page, you'll do it for a single CSS element (.container) instead of all elements which it contains (these elements will fit automatically with the new size).

This is for example my welcome section (in green below the navbar):

...and tese are my column-left (with post body) and my sidebar):

HTML Code
When a CSS definition of main site sections is ready, you can start writing HTML code. There is nothing simpler, just adding DIV layers with the right ID in the right order:

<div class="container">

<!-- Header -->
<div id="logo"></div>
<div id="navbar"></div>
<div id="welcome-section"></div>

<!-- Main Content -->
<div id="column_left">
</div&gt;
<div id="sidebar">
</div>

<!-- Footer -->
<div id="footer"></div>

</div<

Test it on your browser and if it's ok, you can start to add new details to the CSS code and proceed step-by step, section after section (navigation, sidebar, footer...), to complete your CSS in a well structured way and integrate id with HTML code. Indent code you write to higlight dependencies between all elements of the same class:

This little sagacity increase dramatically the code readability when you have to find a specific element in your CSS code.


Custom Class to the end
In general, if I have some classes which can be applied to more than a section, I add them to the end of the CSS file in this way:

I use a descriptive name for each class which identify immediatly the main properties.

I hope this tips can help you to simplify the way you use to write and manage CSS files.


Related content
Optimize your CSS files to improve code readability