Modern CSS Naming Scheme: Namespace-Element-Variant with SCSS modules

nev.md

Namespace-Element-Variant (NEV) naming scheme

Component.module.scss

.Namespace {
  &._firstElement {
    display: flex;

    &.__firstVariant {
      background-color: green;
    }

    &.__secondVariant {
      background-color: blue;
    }
  }

  &._secondElement {
    width: 400px;
    height: 400px;
  }
}

.anotherElement {
  width: 600px;

  &.__firstVariant {
    color: red;
  }

  &.__secondVariant {
    color: pink;
  }
}

---

Component.tsx

import s from './Component.module.scss' 
import clsx from 'clsx';

const Component = () => {
  const isFirstVariant = /* ... */;

  return (<>
    <article className={clsx(s.Namespace, s._firstElement, isFirstVariant ? s.__firstVariant: s.__secondVariant)}>
      <h2 className={clsx(s.Namespace, s._secondElement)}>Article Heading</h2>
    </article>
    <aside className={clsx(s.anotherElement, isFirstVariant ? s.__firstVariant : s.__secondVariant)}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </aside>
  </>);
}

export default Component;