(Note : this article was previously published in French a few weeks before this translation –if you have any feedback on the translation made by Nicolas Hoffmann and John Elbing, please let us know.)
In mathematics, the orthogonality is defined as : for example in a coordinate system in two dimensions, the components of the mark are orthogonal, that is to say that it is impossible to express a function of the other . For those who have more advanced mathematics, this is called the linear independance, that is to say, none of the components may be a combination of the other.
For what interests us, namely the websites, the metaphor gives a good idea of orthogonality, however, it is not exactly that.
It takes more than understanding the concept of orthogonality as the ability of various technologies to work together without mutually telescoping, meaning without a walking each others toes.
We somehow have three dungeons :
- Structure (the HTML) ;
- Layout (the CSS) ;
These three dungeons must be able to communicate together through various gateways. In the previous article, we studied how the HTML could communicate with CSS, let’s go further now !
Orthogonality seen from CSS
As this series concerns CSS, we will stick to study how a CSS can allow to respect this principle of orthogonality.
For example, allowing from CSS as much flexibility as possible for the HTML is a first step to the orthogonality principle – what we discussed in the previous article : avoid too strong coupling between the CSS and the HTML structure.
If the HTML offers classes and
Let’s start with an example : imagine a module having several states. The CSS must contain the module styles as well as styles of the various states of the module. In an accordion menu, each menu must have two states, eg
So he will not even have to ask questions when he adds the interactivity layer, he will handle the various “state” classes that the CSS developer will be made available. And of course, the CSS developer will arrange for these statements to be given priority over default styles of the module..
To use an analogy, it’s like object oriented : when you create an object, you must provide methods to manipulate it. The style sheet designer must do the same.
Qualitative evidence, but not only
If you doubt the importance of the concept of orthogonality, let’s randomly choose some good practices from the Opquast repositories :
- Each page’s source code does not contain any presentational tag or attribute ;
- Each page’s source code contains no element that was misused for presentational purposes ;
- Styling is not used to generate content ;
- Scripts manipulates classes instead of inline styles (link in french).
This concept of orthogonality becomes very important especially for teamwork : as it has been explained as an example in the previous paragraph, it is critical that each stakeholder be able do his work as independently as possible from others.
You might tell us that the front-end developer is doing both HTML et des CSS at the same time. Yes, it can be the case… during the template conception. Then, HTML can be changed by the back-end developer or by contributors using a CMS. And of course, they can make choices slightly differents than yours (!) in the base template. In other words, it is good as much as possible to have anticipated these “gaps”, and the concept of orthogonality will help you to do so.
Even so, the principle remains valid : pure presentation animations must remain to style sheets. CSS has made tremendous progress in its animation capabilities. If you doubt, have a look at one of the last themes of CSS Zen Garden named Steel.
This article is part of the series “Great modern CSS conception principles”.