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:
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):
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:
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)
- 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:
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.