Consider using CSS Cascade Layers

[mxmul]

CSS Cascade Layers are in the 2022 Baseline, and have broad browser support now. This feature solves the core CSS specificity problem that originally convinced us to create wrappers for DOM elements.

With cascade layers, we could implement a very simple scoped reset for CSS modules like:

/** reset.module.css */
@layer reset {
  .lemonReset {
    /* reset dom tags here. e.g: */
    html, body, div, span, h1, h2 {
      margin: 0;
      padding: 0;
    }
  }
}

¹

import { lemonReset } from ':lemon-reset/reset.module.css';
import { appSpecificStyles } from './App.module.css';

function App() {
  return (
    <div className={cx(lemonReset, appSpecificStyles)}>
      <h2>This app has a scoped CSS reset!</h2>
      <p>It has a consistent baseline, but is able to use regular DOM tags</p>
    </div>
  );
}

To use, you would simply add the lemonReset class at the root of your app (or at the root of any embeddable components).

This approach would have a number of benefits:

• Reducing the size of JS bundles, and improving rendering performance (no runtime JS overhead)
• Cross-framework support - this code is no longer coupled to React.
• Using bare DOM elements allows for better integration with linters (e.g. eslint-plugin-jsx-a11y) and TypeScript

Footnotes

1. Side note: adopting the common *.module.css naming convention would simplify integration with build tools like Vite or NextJS. ↩