(I am writing the reply to Padraic Breen here, because replying on the right place would get a too narrow text box.)
---
You { when we start doing this, the precedence rules of CSS not only start to make sense but become an indispensable part of the language }
Molecular CSS *embraces* the second CSS precedence rule (about the writing order of the rules).
---
You {
.name {...}
.value {...}
to provide general style for these elements. If we want to customize these styles in a particular section of the document we use
#technical .name {...}
#technical .value {...}
}
I *imagine* your HTML would be this:
<p id="technical">
The <b class="name">width</b> is <b class="value">20px</b>.
</p>
---
My HTML is:
<p class="technical">
The <b class="name">width</b> is <b class="value">20px</b>.
</p>
There is only one difference in the HTML: I use class, you use id.
I prefer class (instead of id) because of the uniformity (always class selector) and because we can reuse it.
Now I imagine again (and please correct my imagination whenever needed) that in case you were writing code for 10 technical paragraphs among diverse other paragraphs, you would, too, use class instead of id.
I mean, we would write exactly the same HTML code.
---
About the CSS code, I *imagine* that, in case of many diverse paragraphs, you would write this:
.technical {...}
.technical .name {...}
.technical .value {...}
And, if I understood you well, preserving the semantic (meaning) of "name" and "value" in "another-place", I *imagine* you would do this:
.another-place {...}
.another-place .name {...}
.another-place .value {...}
This code is acceptable *IF* "name" and "value" must have a different look in "another-place". Otherwise, you would be just repeating exactly the same declarations as before (.technical.name and .technical.value).
As I said before, please correct my imagination whenever needed.
Probably you would not write such a redundancy in your code. I *imagine* you would
write:
.technical {...}
.another-place {...}
.name {...}
.value {...}
In other words: pure CSS molecules. Even when you don't want to go through the CSS Molecular path, you use CSS Molecules because SOMETIMES it is the only way (or by far the best).
---
The rationale about preferring CSS molecules is written in the article. I will repeat, without organizing, some of the reasons:
- simplicity
- uniformity
- pragmatism
- understanding the style by reading the tag (instead of reading all style sheets looking for *ALL* possible combination of rules that affect the tag)
- reusability
- scalability (independence of classes/rules)
- safety/productivity - you update one part without breaking another part
---
In case the reasons above are not enough for you, I have an argument that I think it is hard to deny:
If the Zen Garden way is so GOOD and EASY, why so many people prefer 'inferior solutions' like Tailwind CSS and JS frameworks?
I think that one of the answers is, "Because writing GOOD code in the Zen Garden way is NOT (so) EASY". In our modern/urban society, few people want to spend Seven Years In Tibet.
Another answer would be "Simply Zen Garden code doesn't scale well".
---
Now I will reply the academic part, which I don't like. It is highly subjective, and it makes it easy for one to be misunderstood.
---
You { But I still think it is an imperative approach and that fully embracing semantics and understanding how it works is ultimately more useful. }
I respect how you feel/think. That being said...
"embracing semantics and understanding how it works"
Most people are not interested in embracing or studying (understanding) semantic CSS, UNLESS it is required.
My point is: most people want to *easily* construct a decent website. Period.
Semantic *HTML* is good for SEO, screen readers and readability of the code.
But semantic CSS is not a thing, except for the ones that decided to worship it.
---
You { It is actually how HTML and CSS were designed to be used. }
Who said that? The W3C (validator) always tells Molecular CSS is OK. The CSS Zen Garden WEBSITE is not a higher authority, if any authority at all.
I don't want to be rude.
But { Please, don’t come tell me “that is not how HTML/CSS is meant to be”, } is clearly written in my article (third section: "Real code. No dogmas.")
I see you are inteligent and want to do what is right.
But I have the feeling (sorry to say that) that you have been *brainwashed*:
Some author(s) say "presentational classes" are pure garbage, etc.
The louder someone shouts, the less true arguments he/she has to offer.
(And I am not defending Tailwind CSS. It is clear in the article.)
For those who advocate that presentational classes is NOT how HTML/CSS was meant to be:
TAKE THIS: https://www.w3.org/MarkUp/HTMLPlus/htmlplus_16.html
Not only the HTML/CSS authorities don't give a damn if you use presentational classes or not,
THEY KEPT *PRESENTATIONAL ONLY TAGS* in the HTML specification.
I said: *presentational* *ONLY* ***tags***
which means TAGS that only exist for presentation!!!!!!!!
Like <b> and <i>.
Where is that F%&*#$@king Separation Of Concerns now?
---
Ohhhhhhhhhhhhhhhhhhhhhhhhhh!
The W3C specification is NOT specifying markup how it was designed to be???
---
It is not productive for me to keep repeating the same arguments of the article.
If CSS Molecules are not useful for you... don't use it!
If you are happy, I am happy!
Good luck!
