Modern CSS

Modern CSS rules for creating robust, responsive and accessible UIs.

The rules work best when you apply a progressive enhancement approach. The CSS features are within Baseline Newly Available. Thanks to Interop, most are within Widely Available.

When editing existing files, match the surrounding code's style. For new code, follow the rules below. Where two rules could both apply, apply both consistently rather than picking one.

Rules

Architecture

Organizing styles (@layer)

• Rule: Use @layer to organize groups of styles.
• Constraint: Avoid global styles outside of layers.
• Rationale: Prevents style conflicts through managing specificity.
• References: @layer on MDN.
• Example: