Most websites are maybe 20 components and localized pages. Not exactly that hard to name and keep constant. Can not think of names, just ask one of the AIs.
> - Easier to read as it's inline with the rest of your HTML
Only if you do a few styles. The moment you have mobile + desktop + dark/light you start to leave lines half a mile long.
> - Not having to manage a separate file and remove unused components
Counterpoint: Components/templates are still the same hell to manage.
> - Being able to use media queries, which I couldn't do in a style tag
CSS ... literally the bread and butter.
> - No risk of changing a class that is used elsewhere. CSS has global scoping which has its benefits but is risky.
Counterpoint: You will end up with styles that are applied to parts, then copied, forgotten to change, and then have a mix of styles that conflict with each other.
And you do not use global scoped CSS, but localized per page. All you need is local CSS + a single parent id/class and voila. Local scoped will not mess with global. Do not do stupid stuff like button { style style style }. No, make global scoped iButton, so you never run into the issue off having parental styles doing funny things to child styles.
Let me introduce our lord and savvier called Nested CSS + Named CSS tags ... Reusable, standardized, ...
Tailscale is frankly a solution for front end JS frameworks, and less for any server rendered html. Use local CSS for html pages that are really local. No need to make global CSS for price cards that you only use on one page. But if something is used over multiple pages, buttons, ... that is global. Simple, no?
Ironically, i am in the process of actually removing Tailscale everywhere because the recent 3 > 4 upgrade screwed so much up. What stayed good? My actual CSS nexted/tag components that i never.
That is one of the issues with frameworks in general, etc, things between versions can really mean a lot more work vs just having everything "basic".
I feel a lot of issue that people have with CSS are more related to not having a proper understanding about CSS, and ignoring some basics. Like do not style base tags. Use nested + custom naming tags, local css + a local id/css and you have no issue with overlap. Best of all, you gain the ability to make easier reusable components as your CSS are the components, not some JS/... whatever call you need to do to render something. It gets messy fast if your breadcrumbs is a components with items, and you need to change something later on. But if its a basic breadcrumbs{} css, adding feature is just a matter of adding naming.
Trust me, took me years to get out of this mindset (and it helped that CSS evolved a lot but most people do not even realize that CSS today != what they know/grew up with)
Most websites are maybe 20 components and localized pages. Not exactly that hard to name and keep constant. Can not think of names, just ask one of the AIs.
> - Easier to read as it's inline with the rest of your HTML
Only if you do a few styles. The moment you have mobile + desktop + dark/light you start to leave lines half a mile long.
> - Not having to manage a separate file and remove unused components
Counterpoint: Components/templates are still the same hell to manage.
> - Being able to use media queries, which I couldn't do in a style tag
CSS ... literally the bread and butter.
> - No risk of changing a class that is used elsewhere. CSS has global scoping which has its benefits but is risky.
Counterpoint: You will end up with styles that are applied to parts, then copied, forgotten to change, and then have a mix of styles that conflict with each other.
And you do not use global scoped CSS, but localized per page. All you need is local CSS + a single parent id/class and voila. Local scoped will not mess with global. Do not do stupid stuff like button { style style style }. No, make global scoped iButton, so you never run into the issue off having parental styles doing funny things to child styles.
Let me introduce our lord and savvier called Nested CSS + Named CSS tags ... Reusable, standardized, ...
Tailscale is frankly a solution for front end JS frameworks, and less for any server rendered html. Use local CSS for html pages that are really local. No need to make global CSS for price cards that you only use on one page. But if something is used over multiple pages, buttons, ... that is global. Simple, no?
Ironically, i am in the process of actually removing Tailscale everywhere because the recent 3 > 4 upgrade screwed so much up. What stayed good? My actual CSS nexted/tag components that i never.
That is one of the issues with frameworks in general, etc, things between versions can really mean a lot more work vs just having everything "basic".
I feel a lot of issue that people have with CSS are more related to not having a proper understanding about CSS, and ignoring some basics. Like do not style base tags. Use nested + custom naming tags, local css + a local id/css and you have no issue with overlap. Best of all, you gain the ability to make easier reusable components as your CSS are the components, not some JS/... whatever call you need to do to render something. It gets messy fast if your breadcrumbs is a components with items, and you need to change something later on. But if its a basic breadcrumbs{} css, adding feature is just a matter of adding naming.
Trust me, took me years to get out of this mindset (and it helped that CSS evolved a lot but most people do not even realize that CSS today != what they know/grew up with)