Modular & reusable front end code

on YouTube ↗32m

" summary

Argues for building front-end code as independent modules: use HTML5 sectioning (multiple H1s OK) and Modernizr for older IE, scope styles with a mod- prefix and shallow selectors, keep media queries inside each module, and store one Sass/JS file per module (one-file-per-module), assembled with Sprockets. Use classes for CSS, IDs only for JS, and prefer data- attributes for grouping. Benchmarks show finding by class is only ~5% faster than by data-attributes in Chrome and mobile devices still handle dozens of queries per second, so data-attributes are practical.

AI-written summary · about

" chapters (9)

1. 0:00The philosophy of modules
2. 5:08Front-end modularity
3. 6:50HTML5 and semantic structure
4. 10:25Modular CSS styling
5. 13:19Naming and scoping modules
6. 16:09Generic and modifier modules
7. 18:23Media queries and design
8. 21:05Behavior with JavaScript
9. 26:44File architecture and Q&A

" related talks

• 44mThe Future is in PiecesJonathan Snook · Web Unleashed 2015
• 09mWriting Modular CSS with CSS modulesKatie Fenn · The Lead Developer 2016
• 28mFront End Legos: Better Design with Reusable HTML & CSSShay Howe · HTML5.tx Texas 2013
• 35mThe Rise of Modular StyleGlen Maddern · CSSConf.Asia 2015
• 29mLean Frontend DevelopmentMatteo Guidotto · Codemotion Rome 2015
• 19mMaking front end modules actually workLin Clark · EmpireNode 2015
• 45mMaintainable Style GuidesBermon Painter · Web Unleashed 2015
• 33mCSS for Software Engineers for CSS DevelopersHarry Roberts · Front-Trends 2016