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 ?

Transcript

1. W E ❤️ C S S
   

   View Slide

2. B U T…
   

   View Slide

3. 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 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. P R E P R O C E S S O R ?
   

   View Slide

6. @ *
   

   View Slide

7. 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 Slide

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

   View Slide

9. .Block-element--modifier
   

   View Slide

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

    View Slide

11. dev.w3.org/csswg
    

    View Slide

12. 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 Slide

13. 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 Slide

14. 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 Slide

15. • 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 Slide

16. WHAT IF WE COULD GO…
    

    View Slide

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

    View Slide

18. @cssnext
    

    View Slide

19. 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

20. cssnext.github.io
    

    View Slide

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

    View Slide

22. Give it a try!
    @MoOx
    

    View Slide