Ever felt like CSS is playing tricks on you? Despite its outward simplicity, CSS has layers of complexity that can even confuse the best of develop...
For further actions, you may consider blocking this person and/or reporting abuse
We should not forget, where it all came from. Do you know, why HTML can set a text to boldface, but not to red or blue?
HTML was initially designed with scientific text in mind, and the guis at CERN used terminals. HTML can show pretty much everything a terminal could show this times.
If you display a text in a browser without CSS, it looks pretty boring, the browser uses only the default formatting. CSS was designed to change this defaults. This was quite efficient, as you need to transfer the formatting only once. People used acoustic-couplers with 300 bit/s to transfer data, so a low bandwidth was a crucial factor.
HTML was created in 1991, CSS was in 1994, but the creators where no designers, they where both employed at the CERN, a scientific organization. Looking back, it would be far more logical to use some kind of full featured formatting language like HPGL, which was created in 1977. But HPGL is quite bulky, so this did not meet the requirements.
There are quite a lot of strange concepts that come from this history. There are no local definitions in HTML, ID´s and CSS-classes are always global. There is no way to repeat elements or build some kind of "macro". At least some kind of preprocessor would be great to control the expession of text. But all this is missing.
People tell you, there is a "separation of concerns". HTML is for the structur, CSS for the styling and JS for the reactivity. If you thoroughly analyze, what each part is used for, you will find that all the functions are mixed in the tools. If you need CSS to display or hide part of your text, this has nothing to do with styling.
The most strange thing to me is the fact, that browsers consume ASCII-text. It would have been far more efficient to define some kind of "object code" that is complied locally and is transferred to the browser, like it is done in most programming languages. Even text processors do not write down plain text. Then we would not use HTML and CSS at all today, as it was only one among several ways to build websites. But even this can probably only be explained from history.
Thanks for sharing your insights! CSS was definitely a ride in the past and still is. Let's see how it moves forward.
I like nesting selectors to avoid specificity issues, especially with my coworkers. It's clearer for anyone not knowing the project. I will read into BEM tho, sounds interesting.
Very insightful read 🔥
Thanks! 😄
Nesting isn't a bad thing overall when you know what you are doing. However for beginners in Sass projects it's very easy to over-nest and then fight with global styles or styles in another part of your file. Especially when you have a huge project and style files approach 1k lines. I love Sass but I've also seen projects written in it that were an absolute dumpster fire and Sass will not complain about it. Stylelint would help keep the code cleaner but from a beginner's perspective, it would probably just decrease DX by a ton. But this is mostly relevant for huge projects.
I’ve been meaning to write basically this exact post for a long time. Awesome job, great work highlighting some of the most common pitfalls and hidden assumptions CSS makes.
Thank you! 🙃
It was quite challenging to cover relevant parts without explaining the generally more boring theory but I think it's still very valuable to go into the details just to get into the right state of mind about writing styles defensively. While the article could have been written in a more structured way I wanted to highlight that exploring and researching is much better than reading a summarization and forgetting it the next day.
Great explainer post! Definitely prefer BEM over nesting, better readibility overall. TIL about stacking contexts (and how it affects z-index), definitely will need to experiment with it.