Styles
Our method for styling elements in this project uses Emotion, a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
Labeling
Because Emotion abstracts away most traditional CSS classes, we use HTML data-* attributes to label components so that editors can easily identify what elements are what components in the DOM. We do this by assigning components data-component-id="componentName" attributes. These are great for element-associated metadata and have little to no performance overhead.
Extending
To expand upon Emotion, we use styled-system which provides us with "style props for rapid UI development." We're able to assign most of the typically styles we use to a component called Box which we can then use as a starting point for new components. This allows us to write shorthand CSS and access our Theme.js variables providing consistent spacing, colours, fonts, type styles, and breakpoints. Style prop definitions automatically generate into CSS classes that are assigned to their components.