Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS Custom Property (aka CSS Variables)

CSS Custom Property (aka CSS Variables)

Dear (JS) Developers,
You now don’t have any excuses anymore: CSS brings custom properties to life, its own variables system, and they also have scope. No jealous! Let see together how to use them and some examples where JS and CSS variables are best friends forever.

Talk done at JavaScript Meetup Luxembourg in May 2018 (25min talk)
For a more detailed transcript, see: https://noti.st/geoffreycrofte/GsYGzw/slides

Geoffrey Crofte

May 08, 2018
Tweet

More Decks by Geoffrey Crofte

Other Decks in Programming

Transcript

  1. “CSS Custom Properties” — @geoffreycrofte Overview What are Custom Properties?

    Quick start with CSS Variables. Why CSS C.P. instead of Sass variables? Use cases & Demos Takeaways
  2. “CSS Custom Properties” — @geoffreycrofte A custom property is any

    property whose name starts with two dashes […] like --foo
  3. “CSS Custom Properties” — @geoffreycrofte Custom properties are solely for

    use by authors and users; CSS will never give them a meaning beyond what is presented here.
  4. “CSS Custom Properties” — @geoffreycrofte Custom properties are solely for

    use by authors and users; CSS will never give them a meaning beyond what is presented here.
  5. Custom properties define variables Variables are referenced with the var()

    notation They are Case-Sensitive Their value is “extremely permissive” What the Spec says…
  6. The main issue with Sass (or LESS) variables: They have

    to be computed to get their value. Computation
  7. Why not pushing transformations directly in JavaScript? Now you’re wondering…

    Maintainability / Portability 
 style=“transform…” is dirty. Period. 

  8. Why not pushing transformations directly in JavaScript? Now you’re wondering…

    Maintainability / Portability 
 style=“transform…” is dirty. Period. 
 Inheritance 
 style=“transform…” do not make --x and --y inherited.
  9. Why not pushing transformations directly in JavaScript? Now you’re wondering…

    Maintainability / Portability 
 style=“transform…” is dirty. Period. 
 Inheritance 
 style=“transform…” do not make --x and --y inherited. It’s a philosophy 
 CSS is for styling. JS is not. 

  10. Why not pushing transformations directly in JavaScript? Now you’re wondering…

    Maintainability / Portability 
 style=“transform…” is dirty. Period. 
 Inheritance 
 style=“transform…” do not make --x and --y inherited. It’s a philosophy 
 CSS is for styling. JS is not. 
 Futur proof 
 Let the CSS engine handle that part.
  11. --spacing: 20; :root { } You can’t “build up” values.

    margin: var(--spacing)px; :root { } Doesn’t work
  12. --spacing:; :root { } Strange behaviour --spacing: ; :root {

    } Invalid Valid Yeah, that’s a space caracter.
  13. “CSS Custom Properties” — @geoffreycrofte Some resources CSS Variable Secrets

    (Lea Verou Smashing Conf. 2017) CSS Custom Properties (CCSWG W3C documentation) CSS Mouse Tracking Gradient (Gradient on Text demonstration) CSS Variable Tutorials (A series of 4 short videos about CSS Variables)