Software engineering gold rules applied to CSS: Modularity

Today I thought about how to get advantage of what we learn in software engineering classes and from more classical programming experiences and best practices.

Now, CSS is an awckwardly false-easy language. Especially coming from OOP (object oriented programming) it sometimes makes you really confused and frustrated.
But you don’t understand what’s the problem with it as long as you are into doing CSS (in fact you just feel dumb..). You really realize the problem just and only when you go back to OOP after using CSS: it’s wonderland! No surprise it feels so cozy to be back in a place in which:

• classes correspond exactly to the real-world concept of classes,
• inheritance is a thing that you have some decisional power about,
• if it compiles, you can assume it will behave in a predictable way in all the platforms it’s supposed to run on,
• you use the same language to define the appearence and the behaviour of the output,
• your final output is the result of computation of one known machine that you can state the technical specs of. In CSS you are really not going to have control on the nature of the interpreter of your code (the browser).
• You can declare constants, yes, I didn’t say variables. Coming from CSS you will watch them really with different eyes.

But in a further analysis, it’s not so true that all the OOP experience is useless when coming to CSS. It’s almsost the opposite.
Back to software engineering lessons, they  tought us to keep in mind wrote with fire to our mind a set of principles to stick to whenever approaching a project. One of these is certainly modularity.  Let’s see how to leverage this principle while using CSS.

Applying Modularity concept to CSS

There’s at least a couple of orthogonal ways in which the process of modularization can be used in CSS. The first is breaking down the stylesheet into different files, representing the what I call “aspects” of our final layout. For example, in a typical scenario we’ll have:

• reset.css
  With this file we reset the properties of default elements to a known value that will be common to all browsers, regardless of browser’s built in default paddings, margins, etc.  This will strike a large part of the cross browser incompatibilities, which are still today the major pain of who develops for the web. Remember to reset also typographic elements like paragraph, headings, blockquotes, table, lists, etc.
  As a rule of thumb, be sure that you have no standard elements out of this file, or dually that all the elements declared in other stylesheets are classes or ids.
• ie6.css/ie7.css
  Unfortunately sometimes you will also need to deal with cross broswer incompatibilities that need a conditional comment and a specific stylesheet for internet explorer 6 or 7 (or both).
  
• grid.css
  Here we define the classes which define the width in terms of multiple of a grid column width. In order to define a proper grid with proper gutters (implemented with margins in css), please refer for example to 960 grid system project (which by the way includes an excelent reset.css).
• structure.css
  This contains the declarations of the divs that partition the page’s real estate. If you worked well in grid.css you don’t need to position them anywhere, just declare here the heights (optional) , look and feel (background images, borders), vertical margins and other styling related properties.
• typography.css
  While generic properties of unstyled text should be specified into reset.css, here instead you define  all the deltas between standard elements and class/id specific elements.

The second layer of modularity that you can add to your stylesheets  is giving a precise hierarchy to the content. Really doesn’t matter which hierarchy and in which order you walk by it, just choose one. In the following example I chose a visual hierarchy, and I walked by it from top to down.
Please be sure also to have a tidy and consistent use of comments in support to this. It helps always a lot.

/*
 * Header
 */

#header h2 {
 color: #333;
 font-weight: 600;
 font-size: 2em;
}
#headline p{
 font-size:1.2em;
}
/* End Header */

/*
 * Sidebar
 */
#sidebar h1{
 font-size: 1.3em;
}
.side-block p{
 color: #555;
 ...
}
/* end Sidebar */

/*
 * Footer
 */
#sidebar h1{
 font-size: 1.3em;
}
.side-block p{
 color: #555;
 ...
}
/* end Footer */

save