[sayurichick]

i work in react, so i just create a <componentname>.css file in the same directory and `import componentname.css` in my component.

I get the advantage of using either Sass or less or postcss with webpack and I get all the features as expected from this workflow.

The only thing I don't have is that unused class feature with my workflow, but I can probably find a postcss plugin which handles that.

I don't see any advantage of this library for me?

[rich_harris]

The CSS developer experience is just one small aspect of the framework. The advantages are spelled out more fully in [this blog post](https://svelte.technology/blog/frameworks-without-the-framew...) — Svelte compiles your components to lean, very fast JavaScript. It handily outperforms React, and your app will almost certainly be smaller and start quicker.

You're unlikely to find a postcss plugin that can eliminate dead code. Unless it can analyse your CSS in the context of your markup, it has no way of knowing what's safe to remove. For that, you need statically analyzable single file components.

[madeofpalk]

No reason why Webpack/`import css` couldn't eliminate the CSS from this

    // styles.css
    .root { background: grey; }
    .button { border: 1px solid blue; }
    .error { color: red }
    .alert { background: red }

    // Component.css
    import styles from './styles.css'

    return (
      <div className={styles.root}>
        <button className={styles.button}>Submit</button>
        {false && <div className={styles.error}>Error!</div>}
      </div>
    )

Both the .error and .alert are candidates for being removed.

Of course, I'm not aware of any solution for nothing this currently, but all the bits and pieces are there for it to be feasible.

[evan_]

We did this for a long time but we still ran into problems where people would use the same CSS class name in two places and styles would interact poorly.

It's easy to just say "don't do that then" but with a large enough codebase, and devs of many different skill levels, it's easier just to move to a model that prevents CSS cross-talk altogether.

[madeofpalk]

The article advocates for using Scoped CSS, which it clearly sounds like you're not using. Mitigating against your problem is the entire point of Scoped CSS ;)

In our codebase (using import './styles.css' w/CSS Modules) every single component has a className called .root at the very top. Never conflicted once.

[muthdra]

I'm just a dumb bug, but it's possible that this dude is betting on keeping it simple by avoiding alien syntax and additional transpilation steps. In browsers, this usually makes errors more relatable to the canon, readable source code your team uses.