Preprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website
summary
A codebase lives through seven continuous years of rewrites and ends up with 50 pages 500 JavaScript files ~1,000 templates, multiple templating engines, and lingering technical debt. The team chooses Less then migrates to Sass, builds a homegrown NBD framework, ships single‑page apps (Action Method Online, Adobe Portfolio), and later adopts Vue plus CSS Modules behind feature flags before switching toward React. Tight wins and ugly hacks include committed compiled CSS for five years and piecemeal rewrites that actually keep the site working.
AI-written summary · about
chapters (31)
- 0:00Introduction
- 0:48Frontend Web Development Ecosystem
- 1:32Adopting New Technologies
- 2:15Industry Pressure
- 3:04Evolving the codebase
- 4:15The right way to build a website
- 5:00Website size and complexity
- 6:02Back in 2010
- 6:59Visual flair
- 7:30CSS as a language
- 7:52Theme galleries
- 8:53Preprocessors
- 9:59Why we chose Less
- 10:43Less as a proof of concept
- 11:17Cut some corners
- 12:00Violations of best practices
- 12:50Benefits of CSS
- 13:53Balance between technical implementation and developer and designer happiness
- 14:13Action Method Online
- 16:16Responsive Behance
- 17:37Adobe Portfolio
- 18:30Homegrown Frameworks
- 20:02Behance
- 20:37Looking for new technology
- 21:54Implementing new technology
- 23:34Arc of CSS development
- 24:50Bee Hans dirty laundry
- 25:13Three templating engines
- 26:42Chrome
- 27:32Responsive
- 28:13Conclusion
related talks
34mPreprocessors, Components, and CSS in JS or" How I Learned to Stop Worrying and Love the Website"
43mPreprocessors, Components, and CSS in JS
43mHow I Learned to Stop Worrying and Love the Website
03mWith good naming convention, CSS works pretty well
26mMoving on from runtime CSS-in-JS at scale
58mAlways crashing in the same car (the state of front end web development in 2022)
45mCSS-in-JS: FTW
24mScalable CSS: Challenges and Rewards of an Uphill Journey