Seeing a <div class="left green">...</div> block in HTML code might hurt the eyes of a lot of web designers. To identify good and bad id and class names, it is important to understand the idea of the CSS.

The World Wide Web Consortium (W3C) defines CSS2 as:

a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.

Therefore class names left, green or largetext are theoretically good according to the first part of the CSS definition, but very very bad according to the second part, which can be illustrated with the following example.

Imagine that you need to change those customer testimony boxes to centred alignment and yellow background with different typeface. The result would be a class named green which defines yellow background and different typeface, and there is nothing green about that <div> block any more. What if you had also used the green class for styling the product descriptions? It soon would be impossible to maintain and expand a website that uses such CSS identifiers. Class name testimonies would be much more appropriate to the particular needs. In addition, the product description class prod-desc could be defined together with testimonies at first place and separated if such necessity arises.

In general, it is a sound practice to choose identifiers that describe the content of that HTML section, not how it looks.

Design Limitations of the CSS

Despite the beauty of semantic HTML mark-up and availability of CSS, the web currently has some intrinsic limitations for designers, who want complete control over the layout of the content.

Traditional graphic design has no need for semantic content. Graphic designers have two dimensional environment available, while the content of the web is linear. Graphic designers use the size, shape, colour and position of different content elements to create the structure of the message, but the web uses semantic HTML mark-up to structure its content. And CSS aims to be that ultimate presentation layer that adds the extra dimension also to the web content.

There is no way to tell Adobe Illustrator (or any other graphic authoring software) that the particular text is the main heading of a poster and that the image following it shows two people sitting in a beach, holding hands and watching sunset. In such context the graphical presentation of the content seems to be limiting over the semantic description available on the web. Semantics is the third dimension of the web content, which print medium will never have. The CSS, however, aims to define the second dimension of the web and make it closer to the print, in terms of freedom of layout.

Unfortunately the CSS currently doesn’t offer a complete control over the layout of the content. In general, however, web has far more ways of describing and defining its content than the print or video medium. The content of the web isn’t locked into the visual or audio definitions chosen by the designer. It symbolizes accessibility and availability of the information for everyone.

Grid Layouts and Content Grouping

In a grid based page layout the content is aligned with a certain number of equally spaced imaginative vertical lines. This creates a system of presentation which is visually harmonic and aids the reader in perceiving and understanding the content. (Wikipedia about the grid)

Such simple and coherent presentation of textual and graphical content became popular after the Second World War together with the modernism in traditional art.

The current version of CSS doesn’t directly provide ways to use columns and grids for presentation. And it is not the purpose of HTML either, as they don’t add any semantic description to the content.

Therefore web designers have to find ways of using existing CSS declarations and available HTML <div> tag, which is meant for sectioning and grouping the content.

One of the important characteristics of the grid is reusablility – it should be possible to devise a set of CSS classes that enable sectioning of the content into grids, and could be applied for any type of content. The only purpose of these classes is to define the grid, not the content inside the grid. This is important.

Such CSS definition requires two nested HTML <div> elements by design – one defines the grid while the other its content. Different interpretation of padding, margin and border rules among different browsers is another reason for having two separate <div> tags. For a consistent rendering of the grid, the extra mark-up is simply necessary.

Now a question to all the HTML purist out there (including me) – do grids define groups or sections of the content? If the answer is yes, then the use of extra mark-up is completely valid as defined by HTML specifications.

Content of the Grids

The typical content of the grid requires a gutter or a padding so it doesn’t run into the column next to it. But notice, that this is the requirement of the content inside the grid, not the grid concept in general. Therefore, we need only two sets of CSS classes – one for the grid, and the other for its content. These classes could be repeated across the whole website.

Any number of standardized classes could be applied to grid content <div>, for example, to define the border or background of the particular grid column.

Conclusions

The choice of reusable and content specific CSS identifiers is very important in order to create websites that are scalable and easy to maintain.

For special design needs, such as grid based layouts, it is advisable to create a set of standard CSS definitions only for layout purposes that don’t describe the content inside the grids. Additional HTML mark-up is necessary to make such layouts consistent among all web browsers. Use of standardized CSS definitions and HTML mark-up for content groups reduces the total page size and significantly shortens the time for design alterations.

Creating complex layouts without extra HTML mark-up will become easy with the availability of CSS3 which includes column separation of the content. Until then, sets of CSS and HTML definitions for commonly used layout elements will provide the only and the best possible solution (See Konstruktors CSS snippets, for example).

________________________________________________
Kaspars Dambis is working on the web since 2000, living in Latvia and studying physics. I believe in simplicity and clarity of the graphic design where the idea and the content is the most important.

This article originally appeared on the author's website.