Separating your CSS into parts

23
May

When starting a new web-project it’s very helpful if you have some guidelines in mind how to structure the CSS-code because a CSS-file usually contains hundreds of lines. So building up a CSS with a structure may help a lot because you will be able to navigate your CSS-file very quickly. Here’s an approach of how your CSS could look like. Every web designer has his own style and techniques so this article shall just be a small help to improve the style of your CSS-coding.
As usual you should always make use of comments to mark parts of your code. CSS-comments are made by using these indicators:

/* comment-line */

/*
comment-block
comment-block
comment-block
*/
So you will use comments to make notations and small props in your CSS-code.
There are some common parts in your table-free layout which will recur in every project. These parts could be named like this (it may be classes or IDs):
div#body
div#container
div#content
div#navigation
div#top
div#left
div#right
div#sidebox
div#infobox
div#logo
div#header
div#footer

ul#navigation
ul#navigation li
ul#subnavigation
ul#subnavigation li
The list is just an example of how your project could be built up. The point is that you can’t see if an element contains content or is just a graphical element. In a web project you will usually have these two kinds of elements:
- content elements: this elements contain pure content, e.g. text, pictures or videos.
- graphical elements: elements which consist of background-images or of a single color are graphical elements. They reflect the “design” of the website.

When developing big projects you’ll notice that it’s very important if you have a well done CSS-structure. It gets harder if you need to develop a template for a CMS (Content Management System) because in most cases, your template has to be scaleable. So if you are always having a red line for your CSS-development/page-structure, it’s quite easy to produce a good XHTML/CSS-website.

So the idea right now is that you separate your CSS-elements into two parts which are represented by the two parts mentioned above: graphics and content. This idea is similar to Content Management Systems where design and content are also separated.
The way you design/develop your websites is as usual – you just have to label your CSS-elements (DIV-elements) with a prefix that assigns the elements to a certain kind (graphical element or content element). So the CSS-structure shown above may now look like this:
div#area_body
div#area_container
div#obj_content
div#area_navigation
div#area_top
div#area_left
div#area_right
div#obj_sidebox
div#obj_infobox
div#area_logo
div#area_header
div#obj_footer

ul#obj_navigation
ul#obj_navigation li
ul#obj_subnavigation
ul#obj_subnavigation li
So as you can see I’ve just added the two prefixes “area_” and “obj_” in order to label the elements. The “area_”-objects represent graphical elements while the “obj_”-elements only contain content-elements. If you now look at your CSS-file, you can quickly recognize whether an element is a graphic or content. Of course you can choose different names for your prefixes like
- gfx_ (for graphics)
- con_ (for content)
- graphic_
- content_
- gobj_ (for graphic object)
- cobj_ (for content object)
and so on. Just be creative with the description of your CSS-elements. At last you could structure your whole CSS-file in a certain way. So you may finally end up with something like this:
/* Graphics */
div#area_body { ... }
div#area_container
{ ... }
div#area_logo { ... }
div#area_header { ... }
div#area_top { ... }
div#area_left { ... }
div#area_right { ... }
div#area_navigation { ... }

/* Content */
div#obj_content { ... }
div#obj_sidebox { ... }
div#obj_infobox { ... }
div#obj_footer { ... }

/* Menu-items */
ul#obj_navigation { ... }
ul#obj_navigation li { ... }
ul#obj_subnavigation { ... }
ul#obj_subnavigation li { ... }
As mentioned above this shall just be an approach in order to imrpove your CSS-style. I’ve already tried this method in some projects and it helped a lot when debugging the CSS-code. It may take a while until you have adapted to this style but it definitely gives a good return.

Article postedPosted in @ 05/23/08

Comments