(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.)

Production of CSS is a field that has evolved. From an afterthought, this subject has turned into a strong foundation for websites, requiring enormous skills that are evolving very quickly. We have already discussed these changes in several (french-speaking) articles as « De l’intégrateur au développeur front-end : un maillon essentiel de la qualité Web » or « CSS, l’âge de raison » and via numerous resources.

If we sum up, producing CSS 10 years ago was ok when you got a “it works”. Performances, maintenability, clean code or nonsense usages of the language, etc. were not important. When it worked, digging deeper or doing better was unfortunately not in the scope. At best some good practices peppered the field, at worst, CSS were huge piles of rubble in disorder

Now, producing CSS has become a high-level sport, the “it works” has been transformed into “it has to work well”.

Performance, maintainability, scalability, extensibility, cleanliness, modularity, ability to work in responsive, etc. are no longer idealistic concepts, these have become tangible goals, even prerequisites.

A metaphor that you can keep in mind throughout this series : CSS should be considered as Formula 1’s. Even if the performance and speed are of course the first ideas that comes to mind with such metaphor, we must rather understand the idea of Formula 1 as “high-tech product”.

CSS must be hyper-efficient, set to a high level of accuracy while having a great flexibility, often allow for constraints that are beyond their direct scope, and everything degrading properly on older browsers (just to give a few examples).

Overall, they are not products of “hobbyists” or “trainees that you do not know what to give to”, but products made by experts with specialized knowledge : high-tech products.

Goals of this series of articles

The goal is to pragmatically address all concepts that are necessary for modern production of CSS. These concepts are well-known basic principles, website constraints (such as performance) and also pure production and/or organizational issues.

Even if these articles will use examples to illustrate these concepts, the aim is above all to understand the approaches and ways of designing style sheets. An important point : these articles will have their separate existence but will have to be considered as a coherent whole.

Here are the articles that will be published (the titles may change) :

1. Basic CSS principles
2. Orthogonality with CSS
3. Establishing CSS conventions and documenting them
4. Performance seen from CSS
5. “Think outside of the box”
6. DRY approaches: don’t repeat yourself
7. “Don’t come back”
8. Popular approaches vs principles
9. Global considerations and conclusion