https://kotlinlang.org logo
#compose-web
Title
# compose-web
r

ribesg

03/09/2023, 2:31 PM
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
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
b

Big Chungus

03/09/2023, 3:07 PM
I just use scss. More docs and way quicker reloads for css-only changes
a

Arjan van Wieringen

03/09/2023, 3:48 PM
Keep styles where they belong, in an external CSS. I see no benefit of using the Kotlin Compose version of styles.
r

ribesg

03/09/2023, 3:48 PM
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
d

David Herman

03/10/2023, 5:54 PM
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
So you get the StyleSheet per component benefit without creating a ton of style elements.
r

ribesg

03/10/2023, 5:57 PM
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
d

David Herman

03/10/2023, 5:58 PM
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.
r

ribesg

03/10/2023, 6:04 PM
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
a

andylamax

03/23/2023, 10:44 PM
@Big Chungus is there a configuration somewhere that shows how you use scss with kotlin/js?
43 Views