Caveats

Like every solution, also Fela is not the ultimate solution and should not be blindly used without evaluating its benefits and disadvantages. The strict design decisions also have some caveats.

Computed Selectors

The unique computed selectors are quite handy as they prevent namespacing conflicts. But they are not designed to be human-readable nor to be mutated at all.
However, if you need to mutate the styles from outside, consider providing an API to pass the props.

Shorthand & Longhand Properties

Probably the biggest downside of using atomic CSS design, is the fact that shorthand and longhand properties can't safely be mixed in a single rule.

const rule = (props) => ({
  border: '1px solid black',
  borderColor: 'red',
})

The above example will not unconditionally render a red border as we can't tell which rule might be rendered before and therefore appears first in the stylesheet. There might have been another rule that renders

borderColor: red

border: 1px solid black

To solve this problem, you should not use shorthand and longhand properties together in a single rule. Perhaps the best is to avoid them at all. To give you an example, here's how you would write the above:

const rule = (props) => ({
  borderStyle: 'solid',
  borderWidth: '1px',
  borderColor: 'red',
})

It might be more code to type, but its also more self-explanatory and descriptive.

CSS properties that contain double quotes

For css properties that need double quotes, make sure you are using nested quotes in your code. e.g.:

const rule = (props) => ({
  ':before': {
    content: '" "',
  },
})