wow-design-wiki/system/css-architecture.md

name, title, description, tags, source

name	title	description	tags	source
system/css-architecture	CSS Architecture Best Practices	Methodologies, file structure, naming conventions.	system css architecture bem oocss	stripe.com, raycast.com, design-systems.dev, css-tricks.com

CSS Architecture

File Structure

css/
├── tokens/           # Design tokens
├── base/            # Reset, typography
├── components/      # Buttons, cards, inputs
├── layouts/         # Grid, containers
├── pages/           # Page-specific styles
└── utilities/       # Helpers

BEM Naming

/* Block */
.card { }

/* Element */
.card__title { }
.card__image { }

/* Modifier */
.card--featured { }
.card--dark { }

Anti-patterns

❌ Плохо	✅ Хорошо
!important	BEM specificity
Hardcoded colors	CSS variables
1000+ line file	Split into modules