CSS Solution?

[simonferndriger]

Thanks to Alpine (🙏), my HTML and JS code now looks just beautiful and is very easy to understand and maintain. However, not so for my CSS code. Even though I basically follow SMACSS and use CSS variables, it is still not very neat. I'm not a fan of Tailwind CSS for personal reasons and would love to have CSS modules.

Is there something planed or even available within the Alpine universe? 😊

[ekwoka]

It's really outside the scope of Alpine.

Most people just use it with Tailwind

[simonferndriger]

Sure, I understand. However, can you perhaps recommend me a tool that is similar to Alpine for CSS? Easy to use, no overhead, but way more powerful?

[ekwoka]

I might be able to, but I just don't really have a good idea of what you are looking for.

This would mostly need to exist entirely separate from Alpine since Alpine doesn't really take charge of rendering anything, and your css would need to exist separate from Alpine, and be in your templating.

[simonferndriger]

In general, I'm looking for a neat way to structure and organize my CSS. Preferably this would happen within modules, but with layers I can at least group similar styles together. I'm not a big fan of a huge build process, which is why I love Alpine so much.

[simonferndriger]

Just need to wait a few more years until the vast majority finally to decided to update their browser so I can actually use the layers without losing outdated users... 🙈🙃

[ekwoka]

You can just use multiple css files.

Put them in the body just above where they are used. CSS loading is only blocking to the content that is after it in the document., not before.

That seems like the only way to do what you want of no build stuff and css module like behavior.

[simonferndriger]

That's actually a great idea!