CSS Code Style

Table of Contents

• Introduction
  • Tools & Frameworks
  • Philosophy & Structure
• CSS Best Practices
  • Code Like it's 2020
  • Selector Specificity
  • A Note On Attribute Selectors
  • Class Naming Convention
  • Self Documenting Selectors
  • Single Direction Rule
  • Name Spacing
  • Size Units
  • Context Sensitivity
  • Format
  • Declaration Order
• Sass (SCSS) Best Practices
  • Nest Only When Necessary
  • Global vs. Local Variables/Mixins
  • @extends
  • Filename Naming Convention
  • Note on Partials
  • Commenting Best Practice
  • Variable Naming Convention
• Class Naming Conventions
  • Basic Conventions
  • CSM
    • Components
    • Sub-Components
    • Modifiers
    • Component modifiers that affect subcomponents
    • State
  • Class Prefix Conventions
  • Us versus Them
    • When to use our selector naming scheme
    • When to use their existing selectors
    • How to use their existing selectors in our components
• Responsive Best Practices
• Localization and Theming Best Practices
• Block Comment Documentation Guide
• Hybrid Projects Best Practices
• Sass-Lint
  • Using Sass-Lint with Atom
  • Using Sass-Lint with Sublime Text
• CSSComb
  • Using CSSComb with Atom
  • Using CSSComb with Sublime Text

Continue on to the Introduction →