@ryanve Ryan Van Etten UX Engineer PlanGrid

Resilient CSS


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


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 {}


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.


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!