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 ?

2f6c2dcd4ba8fc44f1e7f0b2ed3d587d?s=128

Maxime Thirouin

November 14, 2014
Tweet

Transcript

  1. W E ❤️ C S S

  2. B U T…

  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
  4. N O T A P R O G R A

    M M I N G L A N G U A G E
  5. P R E P R O C E S S

    O R ?
  6. @ *

  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
  8. W H AT S O U L D W E

    D O ?
  9. .Block-element--modifier

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

    X T E N D
  11. dev.w3.org/csswg

  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)); }
  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 */ }
  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%)) ) }
  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
  16. WHAT IF WE COULD GO…

  17. F U T U R E S Y N TA

    X U S A B L E T O D AY ?
  18. @cssnext

  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
  20. cssnext.github.io

  21. P L U G I N S G R U

    N T, G U L P, B L U R P…
  22. Give it a try! @MoOx