Modern CSS Vanilla

When to use this skill

• Writing custom CSS/SCSS (not utilizing Tailwind).

• Refactoring legacy stylesheets.

• Implementing complex layouts.

1. New Selectors

• :has(): The parent selector. div:has(> img) selects divs containing an image.

• :is() / :where(): For grouping selectors. :where() has 0 specificity (useful for resets).

2. Layouts

• Container Queries: .card-container { container-type: inline-size; } @container (min-width: 500px) { ... }

• Grid: Use display: grid for 2D layouts; flex for 1D.

3. Architecture

• Layers: Use @layer to control cascade order explicitly (e.g., @layer reset, base, theme, utilities ).

• Variables: Use Custom Properties (--brand-color ) for theming.