$30 off During Our Annual Pro Sale. View Details »

Front-end Systems At Scale

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.

Karolina Szczur

July 21, 2016

More Decks by Karolina Szczur

Other Decks in Programming


  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

  17. None
  18. None
  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

  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

  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