dev-style-css

Structure CSS architecture by adopting CSS Modules, CVA, and co-located styles as canonical anchors. Co-locate files by placing component stylesheets next to their components to reduce style drift and enforce consistent conventions.

Organize CSS file layout using co-located conventions, placing stylesheets like Button.css directly next to Button.tsx. This strategy applies default anchors for new components and references pattern files to guide implementation decisions.

CVA works with CSS Modules by serving as a canonical anchor for component styling strategy. Applying CVA alongside co-located styles helps manage naming, scoping, and style variants efficiently across component-based web projects.

Yes, you can use co-located styles with existing setups by applying the documented anchors and conventions. The strategy covers project wiring across platforms and references alternative patterns to integrate with your current structure.

Limitations of using CSS Modules involve potential style drift without a cohesive strategy. The skill addresses this by documenting decision points for naming, scoping, and file layout, and by referencing alternative patterns like OpenProps.

You need a cohesive CSS strategy when adopting CSS Modules, CVA, and co-located styles to ensure consistent conventions across teams. It reduces style drift by documenting anchors and guiding implementation workflows for new components.