CSS in JS

The styling engine behind VCC UI is built on top of Fela - A small, high-performant and framework-agnostic tool belt to handle state-driven styling in JavaScript.

How it works

The rendering methodology used is often referred to as atomic or virtual CSS, this means that each property is compiled down to a single className and then re-used across components. This allows us to only ship the minimal CSS required to render a specific page.

The following page:

<Block extend={{ color: "red", fontSize: 16 }}>Hello</Block>
<Block extend={{ color: "red", fontSize: 14 }}>World</Block>

Will typically render the following CSS and HTML:

<style>
  .a {
    color: 'red';
  }
  .b {
    font-size: '16px';
  }
  .c {
    font-size: '14px';
  }
</style>
<div class="a b">Hello</div>
<div class="a c">World</div>

Caveats

While we think the atomic CSS approach generally works and scales really well, there are few key considerations to be aware of

CSS shorthand properties

Probably the biggest downside of using atomic CSS design, is the fact that shorthand and longhand properties can't safely be mixed in a single rule.

// Not good.
const rule = () => ({
  border: '1px solid black',
  borderColor: 'red',
});

Read more about why, in the Fela documentation. To mitigate developers running in to this, we're currently working on showing a console.warn when shorthand and longhand properties are mixed unintentionally.

Render global styles

Styling specific components is easy, but what about global styles? While generally not recommended, you can use the renderer to specify arbitrary global CSS (like "reset" styles) if you wish

import React from 'react';
import { styleRenderer, StyleProvider, ThemePicker } from 'vcc-ui';

const renderer = styleRenderer();

renderer.renderStatic(
  {
    margin: 0,
    padding: 0,
  },
  'body'
);

class App {
  render() {
    return (
      <StyleProvider renderer={renderer}>
        <ThemePicker variant="light">...</ThemePicker>
      </StyleProvider>
    );
  }
}