Front-end Systems At Scale

Preprocessors gave us a lot of power to transform and adapt CSS to our needs. But with great power comes great responsibility and we pushed the boundaries of styling as far as we possibly could, forgetting semantics, usability and collaboration.

Are preprocessors still the panacea for our daily CSS struggles? How do we create maintainable and teamwork-empowering systems? And what the heck PostCSS and cssnext have to do with it?
This talk touches on the ways of transforming and writing future-ready CSS with architecture-first approach in mind.

Given at WDCNZ in Wellington, July 21st.

Transcript

1. Front-end systems at scale with @fox ✨
2. Tim Berners-Lee built HTML 25 years ago
3. Håkon Wium Lie created CSS 5 years after eager.io/blog/the-languages-which-almost-were-css/
4. CSS is still the building block carrying the metaphor of design into the living Web.
5. The landscape of front-end tools is fascinating and overwhelming ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
6. Advanced tooling is a blessing and a curse. speakerdeck.com/fox/no-more-tools
7. What’s in a tool?
8. A tool addresses human needs by amplifying human capabilities.That is, a tool converts what we can do into what we want to do. —Bret Victor worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/
9. Only when we have a shaped hypothesis about the experience in mind, should we proceed to choose the right tools. —Alexey Ivanov
10. We jump on the bandwagon of newest technologies ‘cause nobody wants to work on a monolith.
11. How to scale CSS?
12. Tools are supposed to be the panacea for developers’ headaches. They’re not—architecture is.
13. Problems of CSS at scale Global namespace Dependencies Dead Code Elimination Minification Sharing Constants Non-deterministic Resolution Isolation speakerdeck.com/vjeux/react-css-in-js
14. Problems of CSS at scale Scoping and specificity Dependencies Refactoring Performance Sharing Constants Collaboration and Knowledge Sharing
15. How do we solve these problems with CSS tooling?
16. Transforming CSS
19. We don’t understand what pre- and post-processing mean.
20. Future-proofing is pre-processing.
21. Post-processing is an umbrella for automation tasks for production, deploy-ready code.
22. What is PostCSS?
23. PostCSS is a parser allowing building systems to transform CSS.
24. → sneakertack.github.io/postcss-playground/ CSS → CSS parser module → module module → stringifier
25. ` ` { "use": ["postcss-import", "postcss-simple-vars", "postcss-cssnext"], "input": "src/main.css", "output": "dist/main.css", "local-plugins": "true", "postcss-cssnext": { "browsers": "last 2 versions", "verbose": true } } postcss.config.json Example of usage
26. ` ` "scripts": { "postinstall": "npm run watch", "watch": "onchange 'src/*.css' -- npm run build", "minify": "postcss -u cssnano dist/main.css -o dist/main.min.css", "cleanup": "del-cli dist/main.css", "build:css": "postcss -c postcss.config.json", "build": "npm run build:css && npm run minify && npm run cleanup" } package.json github.com/thefoxis/postcss-npm-boilerplate
27. PostCSS is comprehensible and beginner-friendly.
28. https://github.com/postcss/benchmark PostCSS is faster.
29. PostCSS is feature rich.
30. Portability might not be easy.
31. What is ?
32. cssnext is a plugin allowing usage of tomorrow’s CSS syntax today.
33. cssnext is future-proof.
34. CSS isn’t a programming language.
35. Future-proofing might be tricky.
36. What are ?
37. CSS modules offer full style encapsulation. glenmaddern.com/articles/css-modules
38. No global scoping.
39. No specificity wars.
40. Increased barrier to entry with JavaScript-like ecosystem.
41. What does all of that mean for scaling front-end systems?
42. Problems of CSS at scale ✅ Scoping and specificity ✅ Dependencies ✅ Refactoring ✅ Performance ✅ Sharing Constants Collaboration and Knowledge Sharing
43. It’s easier to back up from a bad engineering decision rather than reinvent bad working culture.
44. We need to support design and software choices we make, not only for our users, but our future-selves and teammates.
45. Document and enforce standards in a teaching, empathetic way.
46. People over technology.
47. Thank you speakerdeck.com/fox/frontend-systems-at-scale github.com/davidtheclark/scalable-css-reading-list ⚡ cssnext.io postcss.org github.com/css-modules/css-modules