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

The Future of CSS Isn't CSS

The Future of CSS Isn't CSS

The future of CSS are pre- and post-processors. Let’s explore how we could benefit from a more programmatic approach to writing CSS, and go batshit crazy on Sass.

Demo code to go with this deck: https://github.com/roytomeij/futurecss

Roy Tomeij

June 10, 2015
Tweet

More Decks by Roy Tomeij

Other Decks in Programming

Transcript

  1. The Future of CSS
    Isn't CSS

    View full-size slide

  2. The Present of CSS
    Isn't CSS

    View full-size slide

  3. Hi, I'm @Roy
    advancedsass.com
    slides: roy.io/futurecss

    View full-size slide

  4. advancedsass.com
    slides: roy.io/futurecss

    View full-size slide

  5. Pre-Processors
    vs
    Post-Processors

    View full-size slide

  6. What's in a name?

    View full-size slide

  7. Pre-Processors
    extend the CSS spec

    View full-size slide

  8. Post-Processors
    modify the CSS spec

    View full-size slide

  9. vs
    .foo {
    color: replace-color(red);
    }
    .foo {
    color: red;
    }

    View full-size slide

  10. Write intention
    revealing CSS

    View full-size slide

  11. Variables are
    old news...

    View full-size slide

  12. Programming in
    your CSS

    View full-size slide

  13. CSS is a
    machine language

    View full-size slide

  14. Creativity > Repetition

    View full-size slide

  15. Configuration >
    Search & replace

    View full-size slide

  16. Fun > Frustration

    View full-size slide

  17. Sass is great for
    non-developers too

    View full-size slide

  18. To the code!

    View full-size slide

  19. The following code
    was copy & pasted by
    trained monkeys.
    Don't try this at home.

    View full-size slide

  20. advancedsass.com
    slides: roy.io/futurecss

    View full-size slide