css-architecture

SKILL.md

CSS architecture patterns for scalable, maintainable styling systems across teams and projects.

Covers three core methodologies: BEM (Block Element Modifier) for component naming, SMACSS for modular organization, and CSS-in-JS with Styled Components for dynamic styling

Includes reference guides for CSS Variables, Utility-First CSS (Tailwind pattern), and practical implementation examples

Best suited for large-scale stylesheets, component-based design systems, and multi-team collaboration scenarios

CSS Architecture

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

Overview

Build maintainable CSS systems using methodologies like BEM (Block Element Modifier), SMACSS, and CSS-in-JS patterns with proper organization and conventions.

When to Use