Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Vanilla CSS Tailwind alternative in 16 lines (github.com/gnat)
28 points by geenat 9 months ago | hide | past | favorite | 7 comments

<style scoped> was a good idea. It's frustrating that the spec didn't end up officially supporting it, but a key feature of the web platform is that you can extend it and demonstrate the value that official support would bring. This is very cool, hope it gets some traction.

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.

Previous discussion:


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.

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!

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

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!

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

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact