Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Evolution of Scalable CSS

frontendmastery.com

Post reply on HN
Print view View original

41–50 of 59 posts

Re: The Evolution of Scalable CSS

#41

Post by alehlopeh »

jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

The conclusion I took from the article was that CSS simply isn’t scalable. I’ve been hearing about web components for years and nothing seems to have materialized. I’ve never built something where I thought to even use shadow DOM. Tailwind is the only solution that meets the stated aims. If tailwind doesn’t adhere to the dogma for how CSS should work in principle, well that’s a lovely problem to have.

Re: The Evolution of Scalable CSS

#42

Post by spankalee »

c-smile wrote: post #26
spankalee wrote: post #22

Earlier quoted context omitted.

This is almost exactly how Lit works in browsers. CSS is included with a css`` template string, that contains standard CSS. :host is used to select the host element, as is standard. @customElement('simple-greeting') class SimpleGreeting extends LitElement { static styles = css` :host { display: flex; } p { color: blue; } `; render() { return html` Hello, World! `; } } So you get CSS that loads with components, is sco…

Yes, that's close. Only one thing: that static styles construct shall eventually go into a separate DOM element inside shadow root. Probably not a big deal if there are not that many such components.

Actually, we add the stylesheet objects directly to the shadow root, so they're shared and there's no tags (on supported browsers).

Re: The Evolution of Scalable CSS

#43

Post by dogcomplex »

jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file). That's about it.

While brevity is a nice feature, and we should always strive to make the dev experience as elegant and simple as possible, methinks Tailwind is just asking to become yet another dead-end standard which I very much hope has a standardized compiler back to vanilla CSS. (Does it not?)

Re: The Evolution of Scalable CSS

#45

Post by Chris_Newton »

jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

Scaleable CSS should adhere to the actual spec of CSS and how its evolving in browsers.

The more experienced I get, the more strongly I agree with this sentiment.

Modern CSS provides numerous features to solve real-world problems, from building practically useful layouts and effects to organising and efficiently representing the style rules for large and complicated sites and applications. These features enjoy broad support in browsers, so unless you’re among the unlucky few who really do still need to support legacy browsers like IE or early versions of iOS Safari, you can probably use them as-is without any special tools or heavyweight build processes.

One genuine, qualitative improvement I’ve seen in modern tools is CSS modules. Those let you tidily avoid the old namespacing problems for styles used locally, while still having global styling available for your overall design system, colour scheme, typography, etc. That’s often useful, and as far as I know it can’t yet be done with widely-supported native CSS alone.

If you stick to native CSS and maybe some light tooling like CSS modules, SASS and/or PostCSS, you can work with negligible lock-in, excellent portability and longevity in all the code you write, and access to the full power and flexibility that CSS offers both now and in the future. That means everything you do is effectively scalable by default.

Re: The Evolution of Scalable CSS

#46

Post by danielvaughn »

dogcomplex wrote: post #43
jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file).…

Tailwind is neither a DSL nor is it any kind of standard. It's literally just utility classes. The "compiler" is really just tree-shaking.

I feel like I'm taking crazy pills.

Re: The Evolution of Scalable CSS

#47

Post by bastawhiz »

dogcomplex wrote: post #43
jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file).…

> Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming.

Tailwind takes the "cascading" and "sheets" out of CSS. Instead of describing what types of things look like, it forces you to describe how each individual instance of everything looks. Which is a valid thing to do, but it's absolutely not a parallel track to the purpose and paradigm of vanilla CSS.

Re: The Evolution of Scalable CSS

#48

Post by jaredcwhite »

danielvaughn wrote: post #46
dogcomplex wrote: post #43

Earlier quoted context omitted.

Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file).…

Tailwind is neither a DSL nor is it any kind of standard. It's literally just utility classes. The "compiler" is really just tree-shaking. I feel like I'm taking crazy pills.

Tailwind stopped being "just utility classes" a long time ago and it's really become its own language with TW-specific terminology.

https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/hover-focus-and-other-states

Re: The Evolution of Scalable CSS

#49

Post by andrei_says_ »

dogcomplex wrote: post #43
jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

Tailwind's just a shorthand style for writing [a particular snapshotted older version of] CSS based on the theory that saving on keystrokes is worth more than understandable naming. It then leverages this brevity to let people over-define styles directly in the HTML, which would otherwise take paragraphs of normal CSS and therefore be unwieldy to do (so you'd just alias it into a new CSS property in a separate file).…

Tailwind takes a radical approach to the cascade by allowing devs to completely ignore it at the cost of losing the power of using it.

It eliminates the need to name things at the cost of dealing with unreadable and unmaintainable class soup.

It provides a useful set of constants trivial to create in any non-tailwind css codebase.

Re: The Evolution of Scalable CSS

#50

Post by weo3dev »

alehlopeh wrote: post #41
jaredcwhite wrote: post #38

Reading an article about the evolution of CSS and ending up at…Tailwind…really feels like a bait and switch. I don't consider Tailwind at all a "solution" for writing scaleable CSS. It's a non-standard DSL for providing styling commands to a build tool, and the HTML/CSS output overloads class attributes everywhere in an absurd way. The "just use @apply" retort is also a non-starter if you want to write stylesheets th…

The conclusion I took from the article was that CSS simply isn’t scalable. I’ve been hearing about web components for years and nothing seems to have materialized. I’ve never built something where I thought to even use shadow DOM. Tailwind is the only solution that meets the stated aims. If tailwind doesn’t adhere to the dogma for how CSS should work in principle, well that’s a lovely problem to have.

"Nothing seems to have materialized..." --> https://nordhealth.design/ -- these are all custom components. And here is D. Darnes explaining in part how they get things done: https://web.dev/custom-properties-web-components/

CSS is scalable. You have to actually know CSS in order to accomplish it. I've been here since mid-90s, when CSS first existed. It isn't until the past four or five years that things have really blossomed into (imho) what it should have been from the outset.

Unfortunately, since we have had to use filler tools for things like layout (tables, hacked flexbox for grid), CSS itself has taken a beating in perceived usefulness/weildability. I believe because of THAT, fewer and fewer people have decided to actually learn CSS.

CSS is a robust language. It is programmable. It is scalable. You just have to learn it, practice it, and approach problem solving from the top down, bottom up, and sometimes sideways. :-)

Post reply on HN