Styling
Sass#
The application is styled using Sass (Syntactically awesome style sheets) in SCSS syntax. This is a CSS preprocessor which supplies many features in addition to standard CSS. See the docs for more information.
During build, the Sass is compiled to CSS, vendor-prefixed for browser support, minified, and bundled into the application. This all occurs automatically as part of the Webpack bundling process. When running the application in development mode, saving a Sass file will trigger an automatic rebuild. Utilising hot module reloading, changes will be reflected in your browser without reloading the page.
Structure#
The Sass files are located in the src/Css/ directory.
| Location | Purpose |
|---|---|
App.scss | Core file, imports all required Scss files. |
Base/ | This directory houses core Sass files as well as any global styles to be applied across all elements |
Base/variables.scss | Sass variables file. This file needs to be imported in each Sass file in order to reference variables |
Base/mixins.scss | Sass mixins file. This file needs to be imported in each Sass file in order to reference mixins |
Blocks/ | This directory houses styling for React components in the src/Blocks/ directory. As an improvement, I have now opted to store these files alongside the targeted React components themselves, and then importing the Sass files at the top of the React files. There are still some remaining files here that should be relocated to their respective components |
Components/ | This directory houses styling for React components in the src/Components/ directory. Same as above: As an improvement, I have now opted to store these files alongside the targeted React components themselves, and then importing the Sass files at the top of the React files. There are still some remaining files here that should be relocated to their respective components |
BEM#
CSS classes are structured using Block Element Modifier (BEM) methodology.