Structuring our SCSS files is important since it will help us to keep a cleaner, more consistent and reusable code. Keeping a structured mindset when defining our SCSS will help us avoid technical debt in the near future.
We structure our SCSS files is inspired by the SMACSS convention but also other patterns, such as the 7-1 pattern.
Currently, we're compiling all files into a single one. Such structure allows us to use a web components-inspired approach, in which we can use and compile only the SCSS that is relevant to a specific component.
We have the following folders:
- eos-base
- eos-custom-base
- eos-components
- eos-custom-components
- eos-elements
- eos-layout
- eos-pages
This is where we define all those essential bits of our page, such as variables & typography. They style Bootstrap's base styles. Link.
In here we define our own base styles. Link.
This is where we include Bootstrap components that use EOS styles. Link.
Here we include the styles for the components defined by us. Link.
In this folder, we include basic elements such as buttons or icons. Link.
Here we include all the styles that are used to define the look & feel of the layout we use. Link.
In this folder, we include the styles that are specific to custom features in pages. Link.