There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why:
When there is CSS available for a page, whether it’s inline or an external stylesheet, the browser delays rendering until the CSS is parsed. This is because pages without CSS are often unusable.
The browser has to wait until the CSS is both downloaded and parsed to show us that first rendering of the page, otherwise browsing the web would be a terribly visually jerky to browse. We’d probably write JavaScript to delay page rendering on purpose if that’s how the native web worked.
So how do you improve it? The classics like caching, minification, and compression help. But also, shipping less of it, and only loading the bit you need and the rest after the first render.
It’s entirely about how and how much CSS you load, and has very little to do with the contents of the the CSS.
CSS is a technology where every single byte matters because before loaded and parsed it, actually Nothing happens on the screen, and every optimization is important for the overall User Experience.
I want to share how I use name convention for CSS class names with fewer symbols as possible – aa, ab, ac, ad, etc.
With 26 letters in the alphabet, we get 676 names with two symbols.
We can add numbers and combinations like a0, a1, a2, which gives us another 260 combinations for 936 total.
936 class names with two symbols, and I do not even mention the possibility to use a hyphen (-) and the underscore (_) symbols.
With three symbols, this method gives you over 17 500 class names.
Just a note – you must be aware of collisions with CSS frameworks – for example, Bootstrap 4 uses two names with three symbols – nav and btn.
But how I work with them in my development process?
I put short but descriptive line comments over every single class in my working CSS files, and I achieve separation between the actual CSS data and the metadata that describe the things.
My working CSS files with thousands of lines of code are like the “Airbus Flight Checklist Manual” for pilots :).
The only word that can describe them is – Context!
With one look, you can see where you are and what exactly happens here.
In this situation, I Never think what jh, fv or xr mean.
To keep track of them, in my workflow, I use one text file with pre-generated class names, one by one, I grab them, cut, and use the name in my CSS file, and this way, I’m always on track and know what the next available two or three symbols combination is.
In conclusion, I really hope this can be found, read, and implemented by many people as possible because the Performance impact is Enormous, and let’s think twice, next time when you think to use “human-friendly and readable” class name like “home-wrapper-column-3-offset” that is 14 Times heavier than my solution!