Learn CSS
Lộ trình học CSS modern: từ cơ bản → layout → animation → architecture.
Cơ bản
- Selector & specificity, cascade, inheritance.
- Box model: content, padding, border, margin.
box-sizing: border-box. - Display: block / inline / inline-block / flex / grid / contents.
- Position: static / relative / absolute / fixed / sticky.
- Unit: px, %, em, rem, vh, vw, ch, fr, clamp().
Layout
- Flexbox — 1D layout.
- Grid — 2D layout, có template area.
- Container queries — responsive theo container, không phải viewport.
- Subgrid — grid lồng nhau align với parent.
Modern features
- CSS variables (custom properties).
:has()selector — parent selector!- Nesting — viết SCSS-style trong CSS thuần.
- View transitions API.
color-mix(),@layer,@scope.