# Design

## Decoupled architecture

Styletron is completely un-opinionated about the shape of style objects.

Styletron is made up of three key concepts:

1. Styled components
2. Drivers
3. Rendering engines

### Styled components

Components are used to compose style objects, which are then passed to a driver, which yields a corresponding class name.

### Drivers

Drivers are stateless functions take a particular object shape and produce engine method calls. This is the glue that enables portability of styled components across different rendering engines.

### Rendering engines

Rendering engines are stateful instances that have methods that can produce side effects, such as appending styles to a style sheet.

Engines are responsible for client-side rendering, SSR, and hydration.