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).

const className = engine.renderRule({
margin: 0,
padding: '6px 12px',
textAlign: 'center',
color: 'var(--color)',
backgroundColor: 'transparent',
border: '2px solid #eee',
':hover': {
borderColor: '#fff',
},
});
className.result; // -> 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.
Edit this page