A modern programming language that makes developers happier.

kotlinlang

When using compose-web for the dom, how do you organize your style? Just inline everything on tags? One big `StyleSheet` instance? I would like to define my style with a `StyleSheet` per component but using `Style(stylesheet)` in each component creates a lot of empty `&lt;style&gt;` dom elements.
I'm just playing with compose and trying to know how people do things

Maybe having a huge amount of inline style on each tag isn't so heavy on the browser but I don't know, it is a bad practice when writing HTML/CSS so it feels like it's still a bad practice here

I just use scss. More docs and way quicker reloads for css-only changes

Keep styles where they belong, in an external CSS. I see no benefit of using the Kotlin Compose version of styles.

I change styles based on state a lot, but yeah I could just change classes instead. I also like having a component wrapped in a file, including its style

I'm working on <https://github.com/varabyte/kobweb|Kobweb>, a framework that sits on top of Compose for Web for the dom. I solved this in there by introducing a concept called Component Styles (which you define in your local file -- later, a compile step stitches them all together for you but you don't have to worry about it).

I wrote about Component Styles at a high level in a blog post: <https://bitspittle.dev/blog/2022/kotlinsite#organizing-styles> or you can jump directly into the README if you want: <https://github.com/varabyte/kobweb#componentstyle>

So you get the StyleSheet per component benefit without creating a ton of style elements.

I ended up implementing something like this, I have one class per component implementing `StyleSheet`: either an object or a class with my `Theme` model as a main constructor parameter. Then I have an object which lists both kinds of stylesheets, and a store reacting to theme changes and compiling all those css rules into one stylesheet

As long as you isolate your styles in a file next to the code that uses it and don't end up with a crazy monolith somewhere, I've found that makes the code easier to read and maintain.

The object holding lists of stylesheets is really not a great solution, I should rather do something at compile time instead but I'm not into dealing with Gradle. My Theme thing should also be something that compiles into css variables instead of being passed to Kotlin Stylesheets

<@UL1A5BA2X> is there a configuration somewhere that shows how you use scss with kotlin/js?

<https://github.com/mpetuska/kmdc/blob/master/sandbox/src/jsMain/showcases/MDCCircularProgress.kt#L44|https://github.com/mpetuska/kmdc/blob/master/sandbox/src/jsMain/showcases/MDCCircularProgress.kt#L44>