Show HN: Vanilla CSS Tailwind alternative in 16 lines

https://github.com/gnat/css-scope-inline/tree/main

by geenat • 3 years ago

28 7 3 years ago

alexpetros• 3 years ago

miragecraft• 3 years ago

It’s coming back with @scope at-rule: https://www.w3.org/TR/css-cascade-6/#scope-limits

If no <scope-start> is specified, the scoping root is the parent element of the owner node of the stylesheet where the @scope rule is defined.

It also comes with the ability to set scoping limit.

moritzwarhier• 3 years ago

Previous discussion:

https://news.ycombinator.com/item?id=37715703

Nice idea, I'd still like to see some Lighthouse benchmarks for this compared to regular CSS (sorry, would love to contribute as the idea is lovely, but workday was enough time at the large computer for me today)

OTOH, this looks to me like it could invite yank and FOUC, OTOH the repo says performance is good and no flickering. I mean, it's certainly doable to make this performant and unnoticeable.

Kudos for this great idea.

dandrew5• 3 years ago

Another one from 26 days ago: https://news.ycombinator.com/item?id=37435530

Three posts for the same offering in less than 30 days which makes me consider resubmitting my own things more often. Does HN have a limit on how often reposting is allowed? I know there's https://news.ycombinator.com/newsfaq.html that mentions not more than a year in between but maybe that's just a suggestion?

Interesting idea btw!

jacobn• 3 years ago

I believe there’s a vote threshold where HN blocks resubmission.

stallmanwasrigh• 3 years ago

Hope this inspires scoped <style> to come back to the standard! Seems like the perfect time with the advent of nested CSS support

gitgud• 3 years ago

Very cool, I like the idea, reminds me of css modules in react, but easier. Or svelte/vue css.

Its weird to compare this to tailwind and say it’s a simpler abstraction though. This requires JS on the client, whereas tailwind does not. This modifies the css styles you write at runtime, tailwind does not.

Tailwind verbosity goes up with more child elements

True, but in component-driven design this does not happen in source code at least. The tailwind classes are only defined in each component, not the usages.

No chance of deprecations. 16 lines is infinitely maintainable.

Ridiculous claim, sorry. Those 16 lines aren’t trivial, aren’t tested, aren’t formatted (would be more like 30-40 lines I would think)

Anyway, I’m impressed with the idea and concept behind it. Good work on implementing it!

Show HN: Vanilla CSS Tailwind alternative in 16 lines

Related Stories