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

Back to the CSS (@ToulouseJS)

Back to the CSS (@ToulouseJS)

Remember CSS without variables, math & friends ? Ouch. Preprocessors saved us, until we get bigger & bigger CSS to maintain. BEM saved us again to prevent crappy code, but we still need preprocessors. CSS specs, even if they are slow, will bring lots of features than will deprecate preprocessors. Will we be able to use that in 2020 ? What if we could write the same code today ?

Maxime Thirouin

October 30, 2014
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

Transcript

  1. C S S

    View Slide

  2. C S S I S
    O L D

    View Slide

  3. C S S C A N N O T B E C H A N G E D

    View Slide

  4. N O T A
    P R O G R A M M I N G L A N G U A G E

    View Slide

  5. N O VA R I A B L E S

    View Slide

  6. N O M AT H
    N O C U S T O M I S AT I O N

    View Slide

  7. MAINTAINING CSS
    CAN BE PAINFUL

    View Slide

  8. S P E C S A R E S L O W

    View Slide

  9. P R E P R O C E S S O R ?

    View Slide

  10. @ I N C L U D E

    View Slide

  11. @ E X T E N D

    View Slide

  12. View Slide

  13. O R G A N I S AT I O N
    T H E P R O B L E M I S Y O U R

    View Slide

  14. W H AT S O U L D W E D O ?

    View Slide

  15. .Block-element--modifier

    View Slide

  16. VARS ? MATH ? COLOR ?

    View Slide

  17. dev.w3.org/csswg

    View Slide

  18. WHAT IF WE COULD GO…

    View Slide

  19. F U T U R E S Y N TA X
    U S A B L E T O D AY ?

    View Slide

  20. • C U S T O M P R O P S ( > VA R S )
    • W I T H C A L C ( )
    • C U S T O M M E D I A - Q U E R I E S
    • L O T S O F C O L O R ( ) S T U F F
    • M O R E ( N E S T I N G )

    View Slide

  21. @ C S S N E X T

    View Slide

  22. C S S N E X T F E AT U R E S
    A R E C S S S P E C S

    View Slide

  23. $ npm i -g cssnext
    $ cssnext input.css output.css

    View Slide

  24. P L U G I N S
    G R U N T, G U L P, B L U R P…

    View Slide

  25. cssnext.github.io

    View Slide

  26. View Slide

  27. Thanks !
    @MoOx

    View Slide