Best way for scoped CSS?

[nektobit]

Hello! I would like to confess to you that I fell in love with Alpine.js and it was love at first sight. I have been looking for a framework that will make my interfaces reactive for a very long time and finally found it. He replaced Angular for me where it is inappropriate to use large frameworks.
The only thing I would like is Scoped CSS for Alpine components. Now I save myself by giving specific class names for the components. If anyone knows good practices for this, please share your experience.

[philwolstenholme]

Scoped CSS is a bit beyond the problem that Alpine is trying to solve, you might be better off with Vue if you're looking for this sort of framework feature. Alpine is much smaller and doesn't try and do as much as the bigger frameworks.

There's nothing stopping you from trying out CSS methodologies alongside Alpine though, maybe BEM to introduce scoping as long as you are strict enough with the classnames, or utility-first (e.g. Tailwind) if you don't want to have to worry about scoping as because every class is applied at an element level rather than globally.

[gwleuverink]

I wrote a thing a while back based off alpine 1 that allows for scoped stylesheets. You’ll have no bundler in there so it is a bit limited in what it can do but it worked quite well with plain old css when I fiddled with it.

I believe it can be repurposed with a bit work to be a standalone library.

I have no performance benchmarks though. And I never used it in a production project. I never PR’ed it because I thought there would be not much interest and was outside of the scope of the project.

I’ll give you access to the repo if you’d like to tinker with it 👍

[gwleuverink]

Scratch that. It already is a standalone package. Most of the code is alpine 1 though. Just made it public. I haven’t touched it for a while so be warned 🤞

https://github.com/gwleuverink/runtime-css-scope

Going with utility first or BEM like @philwolstenholme suggested is definitely better. This package was just a fun experiment

[nektobit]

@philwolstenholme I already realized that this is not an easy task and chose BEM, this methodology does everything I need. Thanks a lot for the advice! @gwleuverink Thanks so much for making this thing public. I think it will be interesting even for an experiment.