Object-oriented CSS: modules

The first thing we need to understand about CSS and OO coding is the fact that a CSS style sheet can actually be broken down in several components that we can call modules. There's a module for generic HTML elements, another for page layout and so on. By splitting down our CSS code into these parts, we actually create a series of strictly connected components that can be used in several ways.

Further, these modules can also be imported into other style sheets, thus creating something that, with a certain degree of imagination, we can call a framework. A fundamental thing to grasp in order to get this results is using abstract names for these modules. The names used should also be semantical, as shown by Andy Clarke in his Transcending CSS. For example, we can use branding instead of header, content-sub instead of sidebar and so on.

Since CSS doesn't have the concept of modules in their essence, we should mark up our code with comments, for example using a syntax like this:

/* @module CSS classes
    @members (.foo, p.bar, div.baz) */

This allows also for a rapid text search through our code, thus resulting in a better and easier file maintenance. However, the concepts exposed here are still in a development stage and they'll require further investigations in the next posts.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.