css

Modern CSS supports native nesting and media queries using the & selector to compose styles efficiently. You can apply nested @media rules and pseudo-classes directly within parent blocks to maintain scalable component styles.

CSS Modules best practices require camelCase class names and prohibit root-level tag selectors or nested class/id selectors. Proper descendant and pseudo-class nesting keeps component styles maintainable and scoped.

Yes, the :has() pseudo-class is supported for modern component styling. It enables parent selection based on child states, allowing you to compose dynamic styles efficiently without extra JavaScript.

Root-level tag selectors in CSS Modules break style encapsulation and cause global scope leakage. Avoiding them ensures component styles remain isolated, scalable, and maintainable across the entire project.

This approach focuses on scoped CSS Modules rather than utility classes. Related skills like tailwind-3 cover utility-based styling, while this skill targets maintainable component-level styles with modern CSS features.

Nest pseudo-classes in CSS Modules using the & selector within the parent class block. This ensures styles remain scoped and prevents the need for nested class or id selectors that violate module guidelines.