Preprocessors, Components, and CSS in JS
summary
Behance evolves over eight years from vanilla CSS and copy-paste patterns to Less, then Sass, then CSS Modules and Vue.js, with about 700 JavaScript files, 500 Sass files, ~1,000 templates and 300 Vue files across roughly 50 pages. Teams build a pattern library and an internal MVC (NBD), ship a WYSIWYG site builder (Adobe Portfolio), and retrofit changes behind feature flags. Notable choices: committed compiled CSS for five years (fixed later), incremental upgrades instead of full rewrites, and pragmatic tradeoffs that actually speed delivery.
AI-written summary · about
chapters (14)
- 0:00Introduction and journey
- 5:25Behance’s evolution since 2010
- 9:20Early CSS and copy-paste development
- 12:34Switching to CSS preprocessors
- 16:05Technical debt and LESS adoption
- 19:13Building a custom JavaScript framework
- 21:21Responsive redesign challenges
- 24:15Pattern library and style guide
- 27:05Adobe Portfolio and growing pains
- 31:21CSS in JS and modern frameworks
- 33:50Evaluating new tools
- 35:35Today’s frontend at Behance
- 37:00Embracing messy code
- 40:57Dirty laundry and skeletons
related talks
34mPreprocessors, Components, and CSS in JS or" How I Learned to Stop Worrying and Love the Website"
29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website
43mHow I Learned to Stop Worrying and Love the Website
45mCSS-in-JS: FTW
26mMoving on from runtime CSS-in-JS at scale
21mStyling your CSS with Reason
29mThe evolution of scalable CSS
21mStuff About Cascading Style Sheets