Skip to main content

Getting started

Install with NPM or Yarn. No additional dependencies are required.

yarn add @aesthetic/style

Usage#

We implement and provide what's known as an engine. The engine handles all the heavy lifting behind a streamlined API, but at a high-level, it converts style objects to atomic CSS, which it then inserts into the document as performant as possible.

To begin, import and call createClientEngine() from @aesthetic/style. This engine was designed for the browser, but an alternative exists for server-side rendering.

import { createClientEngine } from '@aesthetic/style';
const engine = createClientEngine();

You can then render CSS declarations and rules to generate atomic class names (1 class name per declaration). Rendered styles are batched and inserted every animation frame, in an effort to reduce repaints and layout tearing.

const className = engine.renderRule({
margin: 0,
padding: '6px 12px',
textAlign: 'center',
color: 'var(--color)',
backgroundColor: 'transparent',
border: '2px solid #eee',
':hover': {
borderColor: '#fff',
},
'@media (max-width: 600px)': {
display: 'block',
},
}); // -> a b c d e f g h

That's about it, basic right? If you're looking for more advanced techniques, patterns, and usage, continue reading the following chapters.

Style sheet order#

The engine implements a unique approach around managing <style /> elements, as it uses 3 elements unlike most competitors which use 1. By using multiple elements, we can ensure proper specificity and ordering of styles. In document order, the style sheets are:

  • Globals are the 1st style sheet. Primarily used for rendering root level at-rules like @font-face and @keyframes, but can house anything.
  • Standard rules are the 2nd style sheet. This is where most CSS declarations are rendered.
  • Conditional rules are the 3rd and final style sheet. Only renders @media and @supports rules to ensure their styles override the standard styles. Media queries are also sorted mobile-first based on their query.