CSS — Layout, Tokens & Performance

• · CS1 — Use Flexbox for one-dimensional layout, Grid for two-dimensional layout; don't force one to do the other's job.
• · CS2 — Design values (color, spacing, type, radius, shadow) come from custom-property tokens, never hardcoded per-component.
• · CS3 — Responsive design is mobile-first (base styles for small screens, min-width media queries layer up).
• · CS4 — Container queries are used for components that must adapt to their container's size, not just the viewport.
• · CS5 — Animations use transform/opacity only (see browser-rendering BR1).

• · Reaching for position: absolute to center something? Try Flexbox/Grid centering first.
• · Repeating a raw hex/px value a third time? Extract it to a custom property.
• · Writing a media query inside a component file for that component's own internal layout? Consider a container query instead.
• · About to add !important? First check if a token/specificity issue upstream is the real problem.
• · Nesting selectors more than 2-3 levels? Flatten with a class-based approach (BEM-like or utility classes).

• · Absolute-position centering — position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) where display:flex; align-items:center; justify-content:center would do.
• · Magic number soup — hardcoded pixel values scattered with no token relationship, each screen slightly different by accident.
• · !important cascades — one !important begets another to override it, escalating indefinitely.
• · Desktop-first breakpoints — max-width media queries layering down, producing awkward overrides on mobile (the majority of traffic on most sites).
• · Animating layout properties — see browser-rendering anti-patterns.

• [ ] Design values from tokens, not hardcoded literals. (CSE1)
• [ ] Animations use transform/opacity only. (CSE3)
• [ ] Mobile-first media query structure. (CSE2)
• [ ] No !important outside documented exceptions. (CSE4)
• [ ] Container queries used for size-aware reusable components. (CSE6)
• [ ] Selector nesting shallow. (CSE5)

• CSS specifications
• MDN CSS Reference

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

• webCSS specificationsW3C
• webMDN CSS ReferenceMozilla