CSS Architecture for Modern Web Applications
summary
Argues that old CSS conventions survive but must be adapted: separate three concrete component types — layout components own parent‑child layout and can export styles, UI components are just decorated, size‑agnostic HTML, container components resolve modifier and behavior state before rendering. Recommends specific tools and patterns: star selector for child rules, data attributes for single behavioral states, CSS custom properties plus a JS style resolver. Counts variations explicitly (three categories × three options ⇒ 27 possible UI states) and shows how to reduce them.
AI-written summary · about
chapters (14)
- 0:00Start
- 1:22PUBLISHED MAY, 2010 RESPONSIVE WEB DESIGN
- 1:57MAJOR BROWSERS IN 2010 10-25%
- 10:25TIPS FOR WORKING WITH LAYOUT COMPONENTS
- 10:37LAYOUT COMPONENTS OWN BOTH SIDES OF THE PARENT CHILD RELATIONSHIP.
- 11:43RENDER THE MARK-UP THAT WRAPS CHILD ITEMS
- 12:57TIPS FOR WORKING WITH UI COMPONENTS
- 15:12SCALABLE MODULAR ARCHITECTURE FOR CSS SMACSS
- 15:37TYPICALLY YOU ONLY HAVE ONE MODIFIER AND ONE BEHAVIOURAL STATE ACTIVE
- 16:12SPLIT BEHAVIOURAL STATES (IF REQUIRED)
- 23:39USE NAMING CONVENTIONS
- 24:11FOR LAYOUT COMPONENTS
- 24:30FOR CONTAINER COMPONENTS
- 25:40THE SAME PROBLEMS ORACLE
