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

Back to the CSS (@dotCSS)

Back to the CSS (@dotCSS)

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

November 14, 2014
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

Transcript

  1. W E ❤️ C S S

    View full-size slide

  2. N O VA R I A B L E S
    N O M AT H
    N O C U S T O M I S AT I O N

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. .Block-element--modifier

    View full-size slide

  8. @ I N C L U D E
    @ E X T E N D

    View full-size slide

  9. dev.w3.org/csswg

    View full-size slide

  10. C U S T O M P R O P S ( > VA R S )
    :root {
    --lineHeight: 3rem
    }
    p {
    margin-bottom: calc(var(--lineHeight * 2));
    }

    View full-size slide

  11. C U S T O M M E D I A Q U E R I E S
    @custom-media --large-viewport (min-width: 60rem);
    @media (--large-viewport) {
    /* styles for large viewport */
    }

    View full-size slide

  12. C O L O R M A N I P U L AT I O N
    body {
    background:
    gray(255, .4)
    linear-gradient(
    color(rebeccapurple alpha(50%)),
    hwb(0, 20%, 40%),
    color(hwb(0, 20%, 40%, .5) lightness(+10%)),
    color(#9d9c tint(40%))
    )
    }

    View full-size slide

  13. • M O R E S E L E C T O R S ,
    • M O R E F U N C T I O N S
    • A N D N E S T I N G !
    A N D M O R E

    View full-size slide

  14. WHAT IF WE COULD GO…

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. cssnext.github.io

    View full-size slide

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

    View full-size slide

  19. Give it a try!
    @MoOx

    View full-size slide