css

# CSS Best Practices

Production-grade CSS development with architectural principles, proper specificity management, and maintainable patterns.

## Core Principles

1. **Single Responsibility** - Each class handles one concern only
2. **Open/Closed** - Open for extension, closed for modification
3. **Immutable CSS** - Utilities and objects never change after creation
4. **Behavior over implementation** - Focus on what the code does, not how
5. **Accessibility first** - Semantic HTML before ARIA, proper contrast and sizing

## Quick Reference

| Topic                                                    | Guide                                                                   |
| -------------------------------------------------------- | ----------------------------------------------------------------------- |
| Specificity hierarchy, safe techniques, !important rules | [specificity.md](references/specificity.md)                             |
| rem vs px, margins, layout algorithms                    | [units-margins.md](references/units-margins.md)                         |
| @extend vs mixins, refactoring workflow, code smells     | [preprocessors-refactoring.md](references/preprocessors-refactoring.md) |
| Architectural principles and common code patterns        | [patterns.md](references/patterns.md)                                   |

## When to Use Each Guide

### Specificity

Use [specificity.md](references/specificity.md) when you need:

- Specificity hierarchy and calculations
- Safe techniques (self-chaining, attribute selectors)
- Anti-patterns (IDs, deep nesting, qualified selectors)
- !important rules (proactive vs reactive)
- Shorthand property gotchas
- Alternatives to reactive !important

### Units and Margins

Use [units-margins.md](references/units-margins.md) when you need:

- rem vs px decision framework
- Line-height best practices
- Margin encapsulation rules
- Single-direction margin patterns
- Margin collapse behavior
- Layout algorithm awarene