> Why? Similar to [BEM](https://getbem.com/introduction/), this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
> Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.
> Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.
> Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection.
- Use an abstraction layer such as [react-with-styles](https://github.com/airbnb/react-with-styles) that enables theming. *react-with-styles gives us things like `withStyles()`, `ThemedStyleSheet`, and `css()` which are used in some of the examples in this document.*
> Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom.
- Define colors only in themes.
```js
// bad
export default withStyles(() => ({
chuckNorris: {
color: '#bada55',
},
}))(MyComponent);
// good
export default withStyles(({ color }) => ({
chuckNorris: {
color: color.badass,
},
}))(MyComponent);
```
- Define fonts only in themes.
```js
// bad
export default withStyles(() => ({
towerOfPisa: {
fontStyle: 'italic',
},
}))(MyComponent);
// good
export default withStyles(({ font }) => ({
towerOfPisa: {
fontStyle: font.italic,
},
}))(MyComponent);
```
- Define fonts as sets of related styles.
```js
// bad
export default withStyles(() => ({
towerOfPisa: {
fontFamily: 'Italiana, "Times New Roman", serif',
fontSize: '2em',
fontStyle: 'italic',
lineHeight: 1.5,
},
}))(MyComponent);
// good
export default withStyles(({ font }) => ({
towerOfPisa: {
...font.italian,
},
}))(MyComponent);
```
- Define base grid units in theme (either as a value or a function that takes a multiplier).
```js
// bad
export default withStyles(() => ({
rip: {
bottom: '-6912px', // 6 feet
},
}))(MyComponent);
// good
export default withStyles(({ units }) => ({
rip: {
bottom: units(864), // 6 feet, assuming our unit is 8px
},
}))(MyComponent);
// good
export default withStyles(({ unit }) => ({
rip: {
bottom: 864 * unit, // 6 feet, assuming our unit is 8px
> Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme.
