Best of JS • Fela

Fela is a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript.
It is dynamic by design and renders your styles depending on your application state.

It generates atomic CSS and supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. Fela ships with a powerful plugin API adding e.g. vendor prefixing or fallback value support.

Fela can be used with React or with any other view library. It even supports React Native.

Support Us

Support Robin Weser's work on Fela and its ecosystem directly via GitHub Sponsors.

Benefits

Predictable Styling
Scoped Atomic CSS
Minimal Bundle Size
No Specificity Issues
No Naming Conflicts
Framework-Agnostic
Huge Ecosystem
RTL Support

Read more about the benefits!

The Gist

Fela's core principle is to consider style as a function of state.
The whole API and all plugins and bindings are built on that idea.
It is reactive and auto-updates once registered to the DOM.

The following example illustrates the key parts of Fela though it only shows the very basics.

import { createRenderer } from 'fela'

// a simple style rule is a pure function of state
// that returns an object of style declarations
const rule = (state) => ({
  textAlign: 'center',
  padding: '5px 10px',
  // directly use the state to compute style values
  fontSize: state.fontSize + 'pt',
  borderRadius: 5,
  // deeply nest media queries and pseudo classes
  ':hover': {
    fontSize: state.fontSize + 2 + 'pt',
    boxShadow: '0 0 2px rgb(70, 70, 70)',
  },
})

const renderer = createRenderer()

// fela generates atomic CSS classes in order to achieve
// maximal style reuse and minimal CSS output
const className = renderer.renderRule(rule, {
  fontSize: 14,
}) // =>  a b c d e f

The generated CSS output would look like this:

.a { text-align: center }
.b { padding: 5px 10px }
.c { font-size: 14pt }
.d { border-radius: 5px }
.e:hover { font-size: 16pt }
.f:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }

Primitive Components

If you're using Fela, you're most likely also using React.
Using the React bindings, you get powerful APIs to create primitive components.

Read: Usage with React for a full guide.

import * as React from 'react'
import { useFela } from 'react-fela'

const rule = ({ fontSize }) => ({
  textAlign: 'center',
  padding: '5px 10px',
  // directly use the props to compute style values
  fontSize: fontSize + 'pt',
  borderRadius: 5,
  ':hover': {
    fontSize: fontSize + 2 + 'pt',
    boxShadow: '0 0 2px rgb(70, 70, 70)',
  },
})

function Button({ fontSize, children }) {
  const { css } = useFela({ fontSize })

  return <button className={css(rule)}>{children}</button>
}

Check this example on CodeSandbox

Examples

Fela + React (source)
- React Styleguidist (source)
- React Native (source)
- ReasonReact
- Next
Fela + Preact (source)
Fela + Inferno (source)
Fela + HyperScript
Fela + Cycle

Documentation

Workshop

If you are coming from CSS and want to learn JavaScript Styling with Fela, there is a full-feature fela-workshop which demonstrates typical Fela use cases. It teaches all important parts, step by step with simple examples. If you already know other CSS in JS solutions and are just switching to Fela, you might not need to do the whole workshop, but it still provides useful information to get started quickly.

Talks

CSS in JS: The Good & Bad Parts (Slides)
- by Robin Weser
CSS in JS: Patterns
- by Vojtech Miksu

Posts

Style as a Function of State
- by Robin Weser
CSS in JS: The Argument Refined
- by Daniel Steigerwald
What is Fela?
- by David Sinclair
Choosing a CSS in JS library
- by Thomas Roch
Introducing Fela 6
- by Robin Weser
A journey into CSS and then into CSS-in-JS
- by Prithvi Raju
CSS In JS — Future of styling components
- by Manjula Dube
Styling Components with React Fela
- by Josh Sherman
The Future of Fela
- by Robin Weser
Introducing Fela 12
- by Robin Weser

Ecosystem

There are tons of useful packages maintained within this repository including plugins, enhancers, bindings and tools that can be used together with Fela. Check the Ecosystem documentation for a quick overview.

Community

Apart from all the packages managed within this repository, there are many community third-party projects that are worth mentioning:

aesthetic - React style and theme layer with Fela support
base-styling-components - Abstract Box and Text Components
bs-react-fela - BuckleScript / ReasonReact bindings for Fela
catstack - A modular mad science framework for teams working on production web apps
css-in-js-playground - A simple playground for CSS in JS solutions
cf-ui - Cloudflare UI Framework
counter-component-with-react-mobx-fela - Counter Component using Fela
cycle-fela - Cycle bindings for Fela
dogstack - A popular-choice grab-bag framework for teams working on production web apps
fela-components - Styling library for React and Fela
fela-react-helpers - A set of useful helpers for Fela
fela-react-prop - Generate class names for fela style rule and apply them as property on a wrapped component
fela-styles-connector - Simplified react-fela connect with auto-bound styles
frejya: Pass styles as props to components
gatsby-plugin-fela - Integrates fela with Gatsby
hyper-fela - HyperScript bindings for Fela
htz-frontend - Source for Haaretz frontend app(s)
kilvin - Primitive React Layout Components with Fela
olymp - Create and build a next gen app using node, react, cssInJS and other cool stuff
preact-fela-simple - Super simple Preact bindings for Fela
reason-react-starter - A ReasonReact starter kit using Fela
storybook-addon-props-fela: Document the props of your Fela components in storybook.
superslider - Slider Component using Fela
telaviv - React Universal Rendering
vashet - ClojureScript wrapper for Fela
veel - Base react styling components using fela with a design system
fela-vue - Enchanced modern vue bindings and toolkit for Fela
vue-fela - Vue bindings for Fela
black-box - combines behavior, presentation, structure in one place & creates all-in-one components using only JS syntax

Support

Got a question? Come and join us on Github Discussion!
We'd love to help out. We also highly appreciate any feedback.
Don't want to miss any update? Follow us on Twitter.

Who's using Fela?

Check all the logos on the website.

Want to add yours? Please create a new issue with your logo attached and we will add it!

Contributing

This project exists thanks to all the people who contribute.

We highly appreciate any contribution.
For more information follow the contribution guide.
Also, please read our code of conduct.

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Commons License.
Created with ♥ by @robinweser and all the great contributors.

import { createRenderer } from 'fela' // a simple style rule is a pure function of state // that returns an object of style declarations const rule = (state) => ({ textAlign: 'center', padding: '5px 10px', // directly use the state to compute style values fontSize: state.fontSize + 'pt', borderRadius: 5, // deeply nest media queries and pseudo classes ':hover': { fontSize: state.fontSize + 2 + 'pt', boxShadow: '0 0 2px rgb(70, 70, 70)', }, }) const renderer = createRenderer() // fela generates atomic CSS classes in order to achieve // maximal style reuse and minimal CSS output const className = renderer.renderRule(rule, { fontSize: 14, }) // => a b c d e f

import * as React from 'react' import { useFela } from 'react-fela' const rule = ({ fontSize }) => ({ textAlign: 'center', padding: '5px 10px', // directly use the props to compute style values fontSize: fontSize + 'pt', borderRadius: 5, ':hover': { fontSize: fontSize + 2 + 'pt', boxShadow: '0 0 2px rgb(70, 70, 70)', }, }) function Button({ fontSize, children }) { const { css } = useFela({ fontSize }) return <button className={css(rule)}>{children}</button> }