Should we move CSS into the components?

[timakro]

Currently we have separate CSS files that we bundle and we tell our users to import our bundle into their custom CSS.

We could also have components styles in the .wc.svelte files with the rest of the components, which is the typical way to do it in Svelte.

We would have to check if using ::part(foobar) in the CSS inside the components still allows users to overwrite the styles.

[timakro]

It turns out the ::part(foobar) selector does not work in the same component, however [part="foobar"] works. For example:

<div part="foobar">

<style>
  [part="foobar"] {
    background-color: red;
  }
</style>

Applications that use Lens can continue to overwrite styles like this:

::part(foobar) {
  background-color: green;
}

The advantages of this approach are:

• Styles in a .svelte file are guaranteed to only affect that component, i.e. they cannot leak
• When editing a component you can see all styles that affect it directly in the same file
• Applications that use lens can still overwrite styles like previously

Disadvantages:

• Different CSS selector syntax in Lens ([part="foobar"]) than in application code (::part(foobar)

Aside: In my opinion Lens styles should be improved so that applications already look good without custom styling. Application styles should be used sparingly, ideally only changing CSS variables like --primary-color.

[patrickskowronekdkfz]

I think we should move the styling into the components. Aside from index.css, we don’t reuse many styling classes, so keeping styles within components would improve maintainability. Additionally, this would make it easier to work with the library.

I somewhat agree with the default styling of Lens. Yes, Lens should feel like something you pick off a bookshelf—well-designed and ready to use. However, users should still have the flexibility to modify it as needed, which we currently support. I wouldn’t change that.

Adding something like a --primary-color variable would make it effortless to customize Lens without modifying CSS directly. However, this isn’t a high priority at the moment.

[timakro]

We decided to do this: https://github.com/samply/lens/blob/1b04dfb8e39252bfba640ed497829d4facfb5252/book/src/development/styling.md