Htmx Tailwind Alternative: Inline Scoped CSS(github.com)

11 pointsby geenat3 năm trước3 comments

Htmx Tailwind Alternative: Inline Scoped CSS

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

2 comments

geenat3 năm trước

A compromise for people who are intrigued by Tailwind's Locality of Behavior but don't want the insane bulk of the CDN or build step-- and want to still write pure vanilla CSS.

Write <style> inline and automatically have it scoped to that element. No more writing individual class/id's.

Been really wanting to transition back to plain CSS for everything moving forward. I miss the ultra-fast "inspect, play with styles, copy/paste into project" workflow that this re-enables.

BTW: Totally unheard of CSS feature you get for free: Scoped inline @keyframes for looped animations!

jessehattabaugh3 năm trước

this is just shadowDOM with extra steps

infogulch3 năm trước

This is extra steps compared to Shadow DOM [1]?! This is 15 lines of js and works with style tags anywhere in the page, and is particularly useful in SSR scenarios (which htmx encourages). Until we get declarative shadow dom [2] I don't think calling it 'fewer steps' is remotely reasonable.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

[2]: https://developer.chrome.com/articles/declarative-shadow-dom... | https://caniuse.com/declarative-shadow-dom