@ryanve Ryan Van Etten UX Engineer PlanGrid

Resilient CSS

#agenda

  1. Define resilient CSS
  2. Show why it makes sense
  3. Apply to design systems

#goal

Resilient means durable and flexible.

When is CSS resilient? 


.resilient {
  --when: immutable;
  --when: flat;
  --when: composable;
}


.not-resilient {
  --when: mutable;
  --when: nested;
  --when: coupled;
}


--antipattern: mutation;

aka overriding

across modules or contexts

button.css


.button {}

app.css


47 results found for ".button"


.mutable {
  --problem: erratic; 
  --problem: buggy;
  --problem: blocking; 
}

Erratic. Behavior differs across context.

Buggy. Context is hard to reproduce.

Blocking. Mutation inhibits change. 


.mutable {
  --cost: time;
  --cost: quality;
  --cost: frustration;
}


.immutable {
  --benefit: predictable;
  --benefit: stable;
  --benefit: agile;
}


--antipattern: nesting;


.drawer {
  .header {
    .title {
      --problem: brittle;
      --problem: unfindable;
      --problem: overspecific;
    }
  }
}


.drawer-box {}
.drawer-header {}
.drawer-title {}


.flat {
  --benefit: findable; 
  --benefit: debuggable; 
  --benefit: interoperable;
  --benefit: reusable;
  --benefit: performant;
}


.context {
  .component {
    --antipattern: mutation;
    --antipattern: nesting;
  }
}


--antipattern: coupling;


.coupled {
  color: Lime;
  width: 100%;
}

Coupling depends on sharing.

Coupling affects inheritence.

Coupling tempts mutation. 


.coupling {
  --cost: dependence;
  --cost: bloat;
}


.composable {
  --benefit: flexible;
  --benefit: learnable; 
  --benefit: systematic;
  --benefit: productive;
}

Composition affords dimensions of change.

Destructure design.

#challenge

Compose approachably.

Balance flexibility vs. governance.

If developers sidestep the system then governance is too extreme. 


.resilient {
  --when: immutable;
  --when: flat;
  --when: composable;
}

Thanks for listening!