neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
929 B
929 B
name, title, description, tags, source
| name | title | description | tags | source | |||||
|---|---|---|---|---|---|---|---|---|---|
| system/css-architecture | CSS Architecture Best Practices | Methodologies, file structure, naming conventions. |
|
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 |