Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
Tweet

More Decks by Karolina Szczur

Other Decks in Programming

Transcript

  1. 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/
  2. Only when we have a shaped hypothesis about the experience

    in mind, should we proceed to choose the right tools. —Alexey Ivanov
  3. 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
  4. Problems of CSS at scale Scoping and specificity Dependencies Refactoring

    Performance Sharing Constants Collaboration and Knowledge Sharing
  5. ` ` { "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
  6. ` ` "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
  7. Problems of CSS at scale ✅ Scoping and specificity ✅

    Dependencies ✅ Refactoring ✅ Performance ✅ Sharing Constants Collaboration and Knowledge Sharing
  8. It’s easier to back up from a bad engineering decision

    rather than reinvent bad working culture.
  9. We need to support design and software choices we make,

    not only for our users, but our future-selves and teammates.