Scoped styles

@scope

syntax

@scope (.scope-root) to (.scope-limit) {
  /* styles apply between root and limit */
}

example

@scope (.card) to (.card-footer) {
  p {
    color: #374151;
    line-height: 1.6;
  }

  a {
    color: #2563eb;
    text-decoration: underline;
  }
}

/* The .card-footer and its contents are excluded */

Note @scope limits where styles apply by defining both a root and an optional lower boundary. Styles only match elements between the root and the limit, not inside the limit. This provides true component scoping without build tools.

REReact

CSS Modules

RE · Styling

syntax

import styles from './Component.module.css';
<div className={styles.container} />

example

// Button.module.css
// .button { padding: 8px 16px; border-radius: 4px; }
// .primary { background: #1976d2; color: white; }
// .secondary { background: #e0e0e0; color: #333; }

import styles from './Button.module.css';

function Button({ variant = 'primary', children, ...rest }) {
  const className = `${styles.button} ${styles[variant]}`;

  return (
    <button className={className} {...rest}>
      {children}
    </button>
  );
}

Note CSS Modules scope class names locally by default, preventing naming collisions. The imported styles object maps your authored class names to unique generated ones. Supported out of the box by most React build tools.

HCHTML & CSS

REReact