rofrischmann/fela

# 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](intro/benefits#local-namespace). 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.

```javascript nocopy
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` which is rendered before this rule. Now rendering this rule, would cause `border: 1px solid black` to always be preferred based on how CSS specificity works.

> There are different solutions to this problem. We highly recommend reading [The Shorthand-Longhand Problem in Atomic CSS](https://weser.io/blog/the-shorthand-longhand-problem-in-atomic-css) for an in-depth explanation including all possible solutions.

There are three options to solve this with Fela. We recommend using [fela-enforce-longhands](https://github.com/robinweser/fela/tree/master/packages/fela-enforce-longhands) as it is the simplest and fastest solution.

1. Do **not** use shorthand and longhand properties together in a single rule. Perhaps the best is to avoid them at all. It might be more code to type, but its also more self-explanatory and descriptive.
2. Use [fela-plugin-expand-shorthand](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-expand-shorthand) to resolve shorthand properties into their longhand equivalents.
3. Utilize the [propertyPriority configuration option](advanced/renderer-configuration) or use the [fela-enforce-longhands](https://github.com/robinweser/fela/tree/master/packages/fela-enforce-longhands) enhancer directly which implements an opinionated `propertyPriority` configuration. This will prioritize longhand over shorthand properties so that they always overwrite their shorthand equivalent.

## 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.:

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