37 Theses on CSS and Web Development
Post from August 16, 2018, filed under Web Development.
CSS optimization is important because we, especially as individuals, don’t always write perfectly efficient and maintainable and understandable code.
Writing such code, quality code, however, is what makes us professionals.
CSS optimization does not entail “everything” that can be done in CSS or through tools; it entails what makes it more efficient and maintainable and understandable while achieving a good balance.
As professionals, we benefit from doing one (or two, or three, but not eighty-five) things really, really well; as web developers, it’s not a bad idea if CSS is one of these things.
It’s useful when we know our needs.
It’s practical when we develop for the present.
It makes our work easier when we keep it simple.
There’s nothing wrong with doing less work—by automating it.
There’s nothing wrong, either, with not doing work that is automated.
(There’s much wrong with not doing needed work because we haven’t yet automated it, perhaps.)
Code should be understandable, and for that it’s useful when it’s consistent and simple.
Consistent CSS is footed on alphabetical declaration sorting (everything else is much too complicated) and on a robust order for selector sorting.
Simple CSS uses functional or generic names or avoids IDs and classes altogether.
Simple CSS also likes shorthands (yes).
Speed is important.
In CSS, selector performance doesn’t matter, and inline CSS is a crime in many countries.
(Web development is not software development.)
Some declarations may be slower than others but there’s rarely reason for panic.
Rule hygiene may be most important for CSS performance.
The most basic way to determine quality is through validation, and high error counts unequal high quality scores.
Every piece of code gets at least touched twice.
For these last two reasons, maintainability and maintenance are critical.
!importantis not an obstacle to maintenance; it’s a tool.
One of the most important principles is separation of concerns, and contents, structure, presentation, behavior are all different concerns.
In code, we don’t want to repeat ourselves.
Accordingly, in CSS, we do want to limit the repetition of declarations.
Optimization for production is an important second step, because in production machines use our code, whereas in operation, humans use it.
When we cannot production-optimize automatically, we should do as much as we can manually, as part of our craft.
For production, we remove all unneeded characters. All of them.
We typically want to reference one style sheet that includes all the styles, though there are cases of high complexity in which a different approach can lead to better performance.
(We cannot be absolved from thinking and making decisions about our particular projects.)
(Exceptions prove the rule.)
We regularly review our CSS, both pre-production and in production.
We are professionals and we aim for quality work.
As professionals we are aware of our responsibilities, we hold ourselves accountable, and we set high ethical standards for ourselves.
And, as professionals, we lead by example.
If you like this or are curious, get yourself a copy of the book (pay what you want).
About the Author
Jens Oliver Meiert is a technical lead and author (sum.cumo, W3C, O’Reilly). He loves trying things, including in the realms of philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.
If you have any thoughts or questions (or recommendations) about what he writes, leave a comment or a message.