Data Driven CSS

by Miriam Suzanne

CSS History

  • 2007 - 2010: Major Grid CSS Frameworks e.g. Blueprint, oocss, 960gs
  • 2008: CSS Systems Natlie Downe talk proposing move away from frameworks
.grid-span {
  width: 23.7288136%;
  margin-right: 01.6949153%;
  padding-left: 08.4745763%;
}

CSS History

  • 2009: Compass + Sass (and Susy)
.grid-span {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);
}

CSS History

  • 2009: Media queries

  • 2011: We get CSS calc

  • 2011: Ethan Marcotte presents "Response Web Design"

CSS History

  • 2014: CSS variables var(--property-name, fallback)
    Similar to SCSS variables... but different
.example { $columns: 2; }
.nested-class { /* $columns == undefined */ }

@media (min-width: 30em) {
  .example { $columns: 6; }
  .nested-class { /* $columns == undefined */ }
}
.example { --columns: 2; }
.nested-class { /* var(--columns) == 2 */ }

@media (min-width: 30em) {
  .example { --columns: 6; }
  .nested-class { /* var(--columns) == 6 */ }

CSS Variables Applied Inline

<button style="--color: blue;">Click me!</button>
button {
  background: var(--color, red);
}

Avoiding CSS Specificity Pitfalls

button {
  background: blue
}

.thing button {
  background: red;
}

/* vs */

button {
  background: var(--btn-color, blue);
}

.thing {
  --btn-color: red;
}

Modifying CSS Variables with JS

// get
let currentColor = footer.style.getPropertyValue('--color');

// set
footer.style.setProperty('--color', newColor);

CSS History

  • 2017: CSS Grid drops in every major browser

Declarative Syntax != Static Results

Dynamic Layouts with Grids and CSS Variables

<dl class="chart" style="--scale: 100">
  <dt class="date">2000</dt>
  <dd class="bar" style="--value: 45">45%</dd>
  <dt class="date">2001</dt>
  <dd class="bar" style="--value: 100">100%</dd>
  <!-- etc… -->
</dl>
.bar {
  --start: calc(var(--scale) + 1 - var(--value));
  grid-row-start: var(--start);
}

Dynamic Layouts with Grids and CSS Variables

Data Driven CSS

By Eric Masiello

Data Driven CSS

  • 209