Thank you very much for your sympathies. I really appreciate your gesture!
The expression "Children of The Zen Garden" I only used in that article, in the *context* of that fairy tale analogy.
It is a bit captious.
In my mind and in my heart, the captious part was NOT targeting YOU or anyone who just uses the CSS principles in the way of csszengarden.com. It was targeting only the intolerant/aggressive/truth-owner people.
I take the opportunity to express once again that I respect the way each developer/person chooses for him/herself.
The contest was not a true contest, but a fun event, like the fairy tale and the content of the replica.
I just wanted to show my concepts in real code (and they worked fine). Someone else's version was very welcome for comparisons like: does Molecular CSS increases too much the code? The answer was no!
You talked about two camps in web development. I will complement, mentioning two kind of brains: engineers and designers. For sure, I don't have a designer brain or mind (and often I miss it). So that mind shift is hard for me.
Tailwind CSS makes the styling without leaving the markup.
CSS Zen Garden makes the styling without touching (again) the markup.
I think that Molecular CSS has more in common with CSS Zen Garden than have differences.
I find very cool the idea of changing the style without touching the markup, I was very impressed years ago when I saw the examples of the CSS Zen Garden.
Take any good webpage made in the CSS Zen Garden way and modify it using just two principles:
1) only use class selectors (excepting the reset.css)
2) each class appears only once as selector (excepting .abc{}, .abc:hover{}); this also eliminates compound selectors
That's it! You have a webpage that is both CSS Zen Garden AND Molecular CSS, a bit more verbose but much more readable, maintainable and scalable, in my humble opinion.
I don't think, for example, that "Rubik14" in the replica means a presentational class. It just sounds like one. Yes, the declarations are
{ font-family: Rubik; font-size: 0.875rem; }
But you can go to that part of the style sheet and change to
{ font-family: Roboto; font-size: 2rem; }
The only problem is that the name "Rubik14" would be misleading now.
The truth is: I disliked the name "Rubik14" but couldn't find any better name at the moment.
Thanks again!
