The styles for this project attempt to (loosely) follow an ITCSS model. Learn more @ https://speakerdeck.com/dafed/managing-css-projects-with-itcss

• settings: Global variables
• tools: Mixins and functions
• generic: Ground-zero styles and unclassed HTML elements (type selectors)
• components: Chunks of UI
• pages: Page-specific styles (use sparingly if at all)
• overrides: Utility classes for things like text alignment, box shadows, etc.
• devsite: DevSite specific styles we use to replicate their live environment. There's a file called _veto.scss which we use to nullify some of their styles.

• Use hyphenated BEM style.

• Prefix classes with w- which stands for 'web'. This helps us namespace our CSS so we don't conflict with DevSite.

• Only nest 2 levels deep.

• Add a comment, // DevSite override, to any CSS that's used to override a DevSite style. Add the comment on the same line as the style.

  color: pink; // DevSite override

We use sass-lint to match Google's internal SCSS style guide.

If you need to disable a rule you'll need to do it for both sass-lint and scss-lint which Google uses internally. We don't use scss-lint because it's deprecated.

// sass-lint:disable-all
// scss-lint:disable all
gap: 16px;
grid-gap: 16px;
// scss-lint:enable all
// sass-lint:enable-all

Some rules, like indentation are stricter in sass-lint then they are in scss-lint. It's ok to disable overly strict sass-lint rules if scss-lint isn't complaining. This is especially useful for formatting box-shadow properties.

• sass-lint rules quick reference.

• To preview your SASS you can use Sassmeister 👍