---
name: system/css-architecture
title: CSS Architecture Best Practices
description: Methodologies, file structure, naming conventions.
tags: [system, css, architecture, bem, oocss]
source: 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

```css
/* 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 |