rofrischmann/fela

# Principles

## Styles are pure functions of your application state

> Read [Style as a Function of State](https://weser.io/blog/style-as-a-function-of-state) for more information on this principle.

Modern UI libraries such as [React](https://reactjs.org) provide neat APIs to implement the very basic concept of component-based views. [Lee Byron](https://github.com/leebyron) used to describe components, during his [Render 2016](https://vimeo.com/166790294) presentation, as the following:

> "The current state of things goes in and a representation of what you want on the screen comes out."

```nolang nocopy
(state) => view
```

This simple concept allows us to compose multiple components into a complex and dynamic UI while always keeping what is displayed in sync with our application state.<br />
Yet a component does not only describe **which** information is displayed, but also **how** it is displayed. In general we use CSS to style our components by creating static selectors that again define a fixed set of style declarations. This approach totally works fine as long as you have a static UI which only updates its displayed data, but does not suit a dynamic UI which alters its appearance depending on data it receives.<br />
**If the view is a function of state, your CSS should be too**, as it is part of your view.

```nolang nocopy
(state) => style
```

Your styles are not just a static style declarations anymore. They can automatically adjust themselves to fit the displayed information at any point of time.<br />
We call the relevant parts of the state properties, usually referred to as **props**.

```javascript
const rule = (props) => ({
  fontSize: props.size + 'px',
  color: 'blue',
  lineHeight: props.lineHeight,
  display: 'flex',
})
```