css
Installation
SKILL.md
CSS Best Practices
Core Principles
- Single responsibility: each class handles one concern.
- Open/closed: extend with new classes; never modify a base class.
- Immutable CSS: utilities and objects never change after creation.
- Behaviour over implementation: focus on what the code does, not how.
- Accessibility first: semantic HTML before ARIA; sufficient contrast and sizing.
Guides
| Read | When you need |
|---|---|
| specificity.md | Specificity hierarchy and calculations; safe techniques (self-chaining, attribute selectors); cascade layers (@layer) and how unlayered styles win; anti-patterns (IDs, deep nesting, qualified selectors); proactive vs reactive !important and alternatives to reactive !important; shorthand gotchas |
| units-margins.md | rem vs px; line-height; margin encapsulation; single-direction margins; margin collapse; layout algorithms (Flow, Flexbox, Grid); gotchas (z-index, magic space under images) |
| preprocessors-refactoring.md | @extend vs mixins; avoiding & concatenation; CSS @import performance; finding dead CSS with beacons; the Three I's refactoring workflow; code smell tables |
| patterns.md | Examples of single responsibility, open/closed, and immutable CSS (with prefixes); components without margin; utility classes; visually hidden text and focusable (stateful) hidden controls; self-chaining; custom properties for design scales |