In a recent ReactiveConf session, Scott Tolinski defended the thesis that developers, due to recent additions to the CSS language, may not need to use a full-fledged CSS framework. Tolinski further demonstrated how developers who do not need to support IE11 can leverage CSS variables to implement a custom design system with characteristically less overhead than a framework.

CSS variables allow developers to express the dynamic relations between CSS properties that result in a target layout. CSS variables, also called CSS custom properties, are declared by prefixing their names with --(e.g. --background). A CSS variable has a value that can be used in other CSS declarations using the [var()](https://developer.mozilla.org/en-US/docs/Web/CSS/var) function. The variable can be updated either via CSS or JavaScript. When such an update occurs, all dependent variables will be updated reactively. CSS variables are scoped to the element(s) they are declared on and participate in the cascade.

Having explicit, named, scoped variables, and user-defined functional computations (var()) allows developers to express custom algorithms closer to how they would in a Turing-complete language like JavaScript. While CSS was originally designed to describe static data (markup language) rather than computations (programming language), the necessity to economically describe dynamically changing layouts has brought CSS ever closer to a regular programming language, while staying true to its declarative roots.

Tolinski gave a concrete demo taken from the complete redesign of a tutorial website in which the user could pick one of six themes, resulting in the user interface changing appearance accordingly. The JavaScript required to implement the functionality consisted only of changing a single class. For instance, the oled theme was associated to the oled-mode class with the following CSS variables configured:

.oled-mode {
  --bg-color: var (--darkPurp)
  --sheetHover: var (--black-20)
  --sheetTextColor: var (--white)
  ...
}

Note how in the previous code variables (e.g. bg-color) are computed from other variables (e.g. darkPurp), creating a list of explicit dependencies. The corresponding CSS code is more maintainable: it is both easier to change, and easier to circumscribe what needs to change. Here, modifying the dark purple value will automatically be reflected everywhere necessary. Modifying the black color will for sure not modify the background color.

Tolinski continued by illustrating how CSS variables can help craft entire design systems. For the sake of the talk, Tolinski reduced a design system to key components that make the design unique: color, type, spacing, characters, elevation, and elements (e.g. cards or accordions).

Palettes can be encoded in CSS variables. Existing tools can for instance generate adaptive, accessible color palettes from a few basic colors, and contrast targets. After defining the colors, Tolinski proceeded with what he termed colors’ intentions (e.g. --bgColor or lineColor).

#web development #design systems #css #javascript #development