role-frontend:css-architecture

Choosing a CSS architecture like BEM or ITCSS depends on project scale and team preferences. This Skill compares these methodologies, helping you evaluate naming conventions and structure against modern alternatives like CUBE CSS to manage styling complexity effectively.

CSS Modules offer scoped styles via build tools, while styled-components and Emotion leverage CSS-in-JS for dynamic styling. This Skill covers these approaches alongside Vanilla Extract and Panda CSS, outlining their distinct trade-offs in maintainability and performance.

Modern CSS features like container queries, nesting, and @layer enable robust responsive design without heavy preprocessing. This Skill explains how to implement these native capabilities, alongside :has() and subgrid, to optimize frontend styling performance.

Yes, the guidance covers configuring Tailwind CSS with custom design tokens. It addresses how to integrate Tailwind within your chosen styling strategy, ensuring consistent theming and responsive design across your frontend components.

You should avoid CSS-in-JS libraries like Emotion or styled-components when prioritizing critical rendering path performance, as runtime injection adds overhead. This Skill details these constraints and suggests static alternatives like Vanilla Extract or CSS Modules.