45 lines
929 B
Markdown
45 lines
929 B
Markdown
---
|
|
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 |
|