Rules

Using Scratch requires to follow some rules to get good result. I give you todoes and not todoes list here. They are also good for performant CSS in general.

CSS

• Never hardcode these values and properties:
  • Hex or rgb(a) colors - see Colors.
  • Any unit in any value - see Units.
  • Font weight or style - see Typography.
  • Paddings and margins - see Gutters.
  • Time units, durations and delays - see Time.
• Never nest classes more then 3 levels - see Performance.
• Never use universal selector * - see Performance.
• Try to avoid attribute selectors and pseudo classes - see Performance.
• Move to variables if you use it more than once - see Variables.
• Check Scratch quick reference before you add something new (use ctrl/cmd + F to find them quickly).
• Again, try to avoid being specific in naming. Don't use left and right. Use start and end. You may need to add rtl layout later, which will swap your left named thing to right, and you'll get incorrect names.

HTML

• You can have modifier as a separate class name. No need extra characters to use (button big primary instead of button-primary-big or contact--button__red).
• Avoid wrappers, as much as possible.