A few things I'm still unsatisfied with in my Svelte projects

[hacktisch]

I love Svelte so much and it's my number 1 choice for every new project
But there's a few things I'm always struggling with, and I'm hoping that I'm just not doing it the best way and someone reading this could suggest me better methods.

1. I too often have the need to write :global(.class) directives in my component's css to override a class in a child. And this breaks the idea of encapsulated class definitions. Feels like I'm messing up the cleanliness of my code this way and I'm hoping there's better approaches.
2. I would like to have multiple components react to the same media query breakpoints, but define the media query in the component's own styling. Let's say something like @media(min-width:${desktopWidth}){... and define this breakpoint globally. I don't like to define the same breakpoint in multiple places which is what I'm doing now.
   I'm aware of a javascript solution (with a global store for example) that listens to media query changes and propagates, but I'm looking for a solution within css.
3. I would realllly love to be able to pass event listeners to components like <CustomInput on:input={...}/> and <CustomButton on:click={...}/>. Currently I have to pass onClick={clickHandler}, and in the child component write export let clickHandler and on:click={clickHandler} it would be amazing if I could pass the handlers directly somehow.

[david-plugge]

To 3. You can forward events by omitting the handler in the component like on:click. You still have to manually add all the forwarded events at the moment, but I think there is a pr that allows forwarding all events from a html element

[david-plugge]

2. You can use css variables for that

[hacktisch]

Ah in a css preprocessor you mean, yes that is the only option I suppose. Thanks!

[stephane-vanraes]

1. Personally I believe having to change the styling of a child is a bit of a code-smell, take into consideration why you are changing the style.

• Is it because of some state relevant for the child ? That should be a prop and styling handled by the child.
• Are you trying to position the child ? This can in most cases be done from the parent using paddings, grid or maybe a small wrapper element
• Other aesthetics ? Check if you could use css variables, they will cascade down to the child and something like color: var(--custom_colour, #f0f) allows for a fallback

A main problem with :global is that it requires you to know the internal structure of the component, if you work in a team (or even alone) and somebody changed the markup of the component for any reason your selector might be broken and having to go through the entire codebase to look if somebody used it is undesired overhead.

2. In the future it will be possible to use CSS variables in media queries, sadly enough this is not available yet :( for now your best option would probably be to add svelte-preprocess and fall back to sass to do this. Alternatively see if a more 'aggressive' use of css variables might benefit you. Thanks to the C in CSS those variables will cascade down.

3. Omitting the handler will pass the event forward <button on:click>

[EricRovell]

To style a child component I use CSS modules. Just import the stylesheet and pass the class as prop:

Define a prop name you like, I use className:

<script>
  export let className = "";
</script>

<div class={className} />

And then just pass it:

<script>
  import styles from "./styles.module.css";
<script>

<Child
  className={styles["some-class-name"]}
/>

Also, as mentioned earlier, just use CSS custom properties, not preprocessors are needed.

<div class="some-class">
  <Child />
</div>

<style>
  .some-class {
    /* this will be inherited by children */
    --some-property: red;
  }
</style>