We strive to embrace the component driven nature of React and approach the development of our site as a composition of small components to build bigger and bigger components. This approach is also known as Atomic Design.
Our components are roughly organized to align with the goals of Atomic Design, both in the organization on the filesystem and in the interactive demos available in our Storybook Instance.
There are lots options out there for styling React components. For this
project, we have chosen to leverage emotion to apply
style rules in a way that encapulates them to the intended components. We
leverage its
object-styles approach to define rules with the css prop.
Also, we've configured our build to use
the emotion css-prop babel preset,
so there is no need to import any emotion dependencies into the component
modules.