CSS
Amplify uses Sass - specifically the SCSS syntax - which is compiled into CSS files. The CSS approach is heavily influenced by Andy Bell's CUBE CSS. This has some similarities with the BEM Methodology but with a more judicious use of class names.
Architecture
The architecture is split into a series of numbered levels in src/styles/sass with each level representing a directory that contains our Sass split out into different partial files. More generic and wide-reaching styles sit within the lower numbered levels, with specificity increasing with each subsequent level.
CSS architecture details for developers.
Linting Sass
Amplify uses Stylelint to help us avoid errors and enforce conventions in our CSS. Visit that site for detailed documentation.
If Stylelint encounters any errors that it cannot automatically fix, these errors will be highlighted in the terminal window and the NPM scripts in the package.json file will fail at the styles step. You must then either manually resolve the errors (preferred), or tell Stylelint to ignore the problematic code. If you have to ignore code for a valid reason, you must specify the reason within the ignore comment. You are encouraged to discuss with another developer before ignoring code.
Do not modify the underlying Stylelint rulesets found in the stylelint.config.js config file without first discussing with the developers responsible for maintaining Amplify.
Compiling Sass to CSS
As mentioned in browser support, the Sass is compiled into the following CSS stylesheets in web/dist/styles:
core.cssandprint.css, which are served to all browsersadvanced.css, which is served to supported browsers.