Install with NPM or Yarn. No additional dependencies are required.
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
@aesthetic/style. This engine was designed
for the browser, but an alternative exists for server-side rendering.
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.
That's about it, basic right? If you're looking for more advanced techniques, patterns, and usage, continue reading the following chapters.
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
@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
@supportsrules to ensure their styles override the standard styles. Media queries are also sorted mobile-first based on their query.