Modern CSS Best Practices

Cascade layers group styles with @layer and let you decide which group wins before specificity is compared. Use them to order resets, base styles, third party CSS, components and utilities, so you never need higher specificity or !important to override something. Remember that unlayered styles beat layered ones.

Use media queries for page level layout and user preferences such as dark mode and reduced motion. Use container queries for reusable components that appear in different sized places, so each adapts to the space it actually has. Mark the parent with container-type: inline-size first.

Yes, browsers parse nested CSS natively. The main differences from Sass are that compound selectors need &, as in &.active, and string concatenation such as &__title does not work. Check MDN for current Baseline status if you support older browsers.

Use Flexbox for items in one direction whose sizes come from their content, such as toolbars and button groups. Use Grid for layouts in rows and columns, or when the container should decide the sizes, such as page layouts and card grids. Both support gap for spacing.

Style with single classes instead of IDs and long selectors, use :where() for defaults that should be easy to override, and use cascade layers to order groups of styles. Avoid !important, except deliberately in an early layer.

Define tokens that should become utility classes inside @theme, such as --color-brand, which creates bg-brand and also outputs a CSS variable. Define plain variables that should not create utilities in :root. Both can be used with var() in custom CSS.