@barguide/style-guide

Applications CSS

This folder should remain pretty slim. Everything in here should have and continue to follow the patterns provided. If we need 100 yellows that's fine but, we need to follow the --spot convention and carefully name things.

Folder Structure:

The basic idea is to separate concerns and minimize duplication of code. No longer will variables need to live everywhere in the site, they will ALWAYS be in the variables folder. If you need one off variables in your Component just create a :root {} tag in the CSS module limit the scope to that file.

Base

These files reset and normalize our CSS. It sets up the overall feel for Applications and should remain extremely simple. Using this approach we will eventually be able to throw together a page of just standard tags with no classes, and it would still feel right.

Global

This folder is imported into this new style-guide. This serves as an easy spot to add new Global CSS that will not be parsed through the CSS Module loader, meaning it will output Standard CSS which is very useful for 3rd party / vendor code.

Variables

Colors, grid, typography and all that good stuff goes in here, as a variable within a :root {} tag. Following this pattern, we can @import 'node_modules/@barguide/style-guide/src/variables/index.css' from each new CSS module. The variables values are brought in to replace our var() with the value from the style-guide producing 0 waste or duplication.

Note: If, we were to add standard .selector { color: orange; } in these files, that CSS would be brought into EACH and EVERY file that imported it 👎 👎 👎

Style linter

The basic idea here is the same as Eslint... We can enforce rules and standards around how we write CSS. This is setup to run on all CSS files in the shop application.

• prevent the usage of ID selectors,
  • the are less performant
• Preferred spacing and allowed values
  • ex: don't use seconds, instead use milliseconds
• Avoid compound selectors ie: a.link-class -> .link-class
• Avoid long selectors (capped at 3)

Note: we can still disable these rules as needed:

/* stylelint-disable-line */
/* stylelint-disable-next-line */