When using compose-web for the dom, how do you organize your style? Just inline everything on tags? ...

# compose-web

[ribesg]

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 <style> dom elements.
I'm just playing with compose and trying to know how people do things

[ribesg]

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

[Big Chungus]

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

[Arjan van Wieringen]

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

[ribesg]

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

[David Herman]

I'm working on 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

[David Herman]

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

[ribesg]

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

[David Herman]

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.

[ribesg]

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

[andylamax]

@Big Chungus is there a configuration somewhere that shows how you use scss with kotlin/js?

[Big Chungus]

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