Shopify/css

Guidelines for writing CSS and SCSS at Shopify.

CSS

This repository contains the guidelines for writing CSS and SCSS at Shopify.

Table of contents

• Introduction
  • Tools and frameworks
  • Philosophy and structure
• Building a component
  • CSV
    • Components
    • Sub-components
    • Variations
    • Component variations that affect sub-components
    • State
  • When to split a component
  • Contextual styles
  • Layout sub-components
• Variables maps and functions
  • Conventions
  • Creating a new variable for your component
• Using common styles with mixins
  • Why mixins?
  • Creating a new mixin for your component
• Commenting
  • Inline comments
  • Block comments
  • File comments
  • Function and mixin comments

Continue on to the Introduction →