23
May
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
*/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- 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- 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 { ... }
