CSS

CSS Protocol

General CSS preferences, lower priority over project's local instructions.

If possible merge instructions, if conflicting, prefer project's local instructions.

Modern Features

Use nesting, :has(), &, &:hover, nested @media

.button {
  color: blue;

  &:hover {
    color: darkblue;
  }

  @media (max-width: 600px) {
    width: 100%;
  }
}

CSS Modules

• camelCase class names only (no dashes)
• No tag selectors at root level
• Nest only with & (pseudo-classes, pseudo-elements, attribute selectors, at-rules). No descendant or child selectors via nesting.

/* ✓ Good */
.container { ... }
.headerTitle { ... }
.submitButton {
  background: blue;

  &:hover {
    background: darkblue;
  }

  &[disabled] {
    opacity: 0.5;
  }

  @media (max-width: 600px) {
    width: 100%;
  }
}

/* ✗ Tag selector at root */
div { ... }

/* ✗ Descendant via nesting */
.parent {
  .child { ... }
}

/* ✗ kebab-case */
.submit-button { ... }