Software engineering applied to CSS: DRY rule

For the sake of this same principle (Don’t Repeat Yoruself), I will not spend many lines about *WHY* it’s important not to duplicate information in informatics in general.

Basically the reasons always fall into being a matter of :

• Data consistency, think about databases, you hopefully want to update the date of birth of a person just in the ‘people’ table, and not into every table who references a person.
• Mantainability, think about programming, you will not want to mention the presence of a steering wheel and pedals when you are asked to describe what a Lamborghini supercar is.
  Maybe you will mention these basic common characteristics  if somebody asks you what a car is. Then, when they ask you about Lamborghini you will just mention it’s a car and the person will understand it has steering wheel and all the rest.

All these extremely good reasons not to repeat yourself in informatics derive from the fact that whenever needed, the one who’s best to do operations in cycle without errors is the computer, not the programmer.

Advice

Even if DRY mindset is very encouraged while producing new code, it’s also true that obtaining very good DRYness at first shot is very uncommon. In fact it is a process that will put yourself using precious time, energies and concentration just into refactoring old code.
Useless to say that this is maybe the best investment in future you can do, and it will pay back more and more as the project grows.

DRY approach to CSS

Said that DRY is necessary and achievable at different degrees through a process of progressive code refactoring, let’s see how it applies to this very unconventional language: CSS.
In other environments like C++ and Java we can leverage the explicit inheritance at a class level. For example we can say in Java:

Class Lamborghini extends Car {
   public Lamborghini (..) {
      ...
   }
}

This means that every lamborghini object we create, an instance of the class Lamborghini will be created and it will always inherit every characteristic (methods and fields) of the class Car.

...
// myLambo is also a Car object!
Lamborghini myLambo = new Lamborghini(..);
...

In CSS this does not really happen in such a clean way. There absolutely is inheritance, and it’s very useful. Just that every object (xhtml DOM element) is able to choose its parents. As many as it wants.
Here comes an example.

/* Declaring a CSS class into stylesheet */
.footer_block {
 ..
}
.category_posts_block extends .footer_block { // No way, man.
  ...
}

And in the xhtml document..

/* Instantiating an xhtml node (read: object) into xhtml DOM */
<div class="footer_block category_posts_block">
  ...
</div>

This inversion of control has very likely been chosen to remark the secondary role that the style needs to have towards the content. Indeed, in the three layers model