We went down a similar path (using Hotwire, non the less!) and got to many of the same conclusions. It is impressive to see what CSS does and how many of the headaches are gone and :has is very powerful.
Alas, after several months we tore it all out and went back to React+Tailwind.
We still use native HTML popovers and :has selectors and other things we've have learned.
But writing UIs across three files (template, stimulus controllers, css) is such a tremendous bore. Concepts that belong together are spread out and I needed to be diligent with placing attributes and classes and remember to remove them all when removing functionality again. Obviously no compile-time checks, just magic strings and runtime errors. The Hotwire docs were also surprisingly hard to work with. All in all a lot of friction.
This just was not worth it.
inb4 rage, it is possible to use React for the UI alone and pass in fully formed view models, use form submissions and links.
I'm curious about this. I'm not a frontend engineer but enjoy tinkering on simple frontend UIs for my hobby projects, and I've found Tailwind nice for creating encapsulated components more easily. It's funny that it skips the entire cascading part of Cascading Style Sheets though. Are there major downsides besides that?
> It's funny that it skips the entire cascading part of Cascading Style Sheets though. Are there major downsides besides that?
I think cascading is a bad default. It's useful, but only sometimes, and often causes headaches like unintended coupling and confusion about why rules are being overridden. The utility class approach (like Tailwind) makes a lot of issues like this go away. I don't see a good reason why the traditional approach is worth the extra pain or discipline.
CSS can be laser-like specific if you want it to. Want to only affect that thing? Use ids, inline styles or learn how to write proper selectors.
I am by no means a CSS expert, but 90% of CSS issues I heard complaints about boiled down to the complainers not having spent the time necessary to learn the basics. And the other 10% were solved by :has()
That being said, most other styling solutions I had used (e.g. in GUI libraries) will quickly make you wish you had CSS.
I like the idea of using vanilla CSS for my personal website but, not being a designer, making something that looks good from nothing is difficult. I've looked at some templates to get started with but they are generally a mess of a million classes I don't need
> Using characters as the unit of measure ensures that we get the right behavior no matter which device you’re using and in a number of other scenarios such as multitasking on iPad or even if you simply enlarge the font size past a certain point.
Yeah think it’s best to push html css js to the limit & avoid frameworks unless obviously needed. They’re just such a rabbit hole of complexity fragility and lately supply chain risk
We went down a similar path (using Hotwire, non the less!) and got to many of the same conclusions. It is impressive to see what CSS does and how many of the headaches are gone and :has is very powerful.
Alas, after several months we tore it all out and went back to React+Tailwind.
We still use native HTML popovers and :has selectors and other things we've have learned.
But writing UIs across three files (template, stimulus controllers, css) is such a tremendous bore. Concepts that belong together are spread out and I needed to be diligent with placing attributes and classes and remember to remove them all when removing functionality again. Obviously no compile-time checks, just magic strings and runtime errors. The Hotwire docs were also surprisingly hard to work with. All in all a lot of friction.
This just was not worth it.
inb4 rage, it is possible to use React for the UI alone and pass in fully formed view models, use form submissions and links.
I mostly agree. I prefer vanilla CSS to frameworks but I find a lot of value in CSS modules.
In particular I use:
1. The `composes` feature to do something like base classes.
2. The import feature to get something like namespacing.
Given the recent advancements in CSS, I won’t be surprised if they eventually build something like `composes` into the base language.
The namespacing seems more like an artifact of how you package your website and how you stay organized within your package system (I use webpack).
>let me be clear: there is nothing wrong with Tailwind
But there is.
I'm curious about this. I'm not a frontend engineer but enjoy tinkering on simple frontend UIs for my hobby projects, and I've found Tailwind nice for creating encapsulated components more easily. It's funny that it skips the entire cascading part of Cascading Style Sheets though. Are there major downsides besides that?
> It's funny that it skips the entire cascading part of Cascading Style Sheets though. Are there major downsides besides that?
I think cascading is a bad default. It's useful, but only sometimes, and often causes headaches like unintended coupling and confusion about why rules are being overridden. The utility class approach (like Tailwind) makes a lot of issues like this go away. I don't see a good reason why the traditional approach is worth the extra pain or discipline.
CSS can be laser-like specific if you want it to. Want to only affect that thing? Use ids, inline styles or learn how to write proper selectors.
I am by no means a CSS expert, but 90% of CSS issues I heard complaints about boiled down to the complainers not having spent the time necessary to learn the basics. And the other 10% were solved by :has()
That being said, most other styling solutions I had used (e.g. in GUI libraries) will quickly make you wish you had CSS.
Yes.
The cascade model is a bad design.
I like the idea of using vanilla CSS for my personal website but, not being a designer, making something that looks good from nothing is difficult. I've looked at some templates to get started with but they are generally a mess of a million classes I don't need
In the context of determining responsive layout:
> Using characters as the unit of measure ensures that we get the right behavior no matter which device you’re using and in a number of other scenarios such as multitasking on iPad or even if you simply enlarge the font size past a certain point.
Nice idea! I haven't seen this before.
I used to be like this, until I realized Tailwind makes me faster.
Yeah think it’s best to push html css js to the limit & avoid frameworks unless obviously needed. They’re just such a rabbit hole of complexity fragility and lately supply chain risk