CSS Rule

---
trigger: model_decision
---

# CSS Rule

## BEM Pattern (Block Element Modifier)
- Purpose: Structured naming convention for maintainable CSS
- Example: .card__title--large
- Use When: Building scalable component-based CSS

## Container/Content Pattern
- Purpose: Separate layout concerns from content styling
- Example: .container handles width/padding, inner elements handle specific styles
- Use When: Creating reusable layouts across different content types

## Mobile-First Pattern
- Purpose: Start with mobile styles as default, enhance for larger screens
- Example: Base styles for mobile, @media queries add desktop features
- Use When: Building responsive layouts (always)