Atomic Design System architecture with SCSS, ITCSS
  • Introduction
  • Core principles
    • Atomic Design
    • ITCSS
    • Unifying ITCSS with ADS
    • Single Responsibility Principle (SRP)
    • Open / Close Principle (OCP)
  • Conventions
    • BEM : presentation
    • Our flavor of BEM
    • Prefixes
    • How to use the Modifier entity
    • How to use the Element entity
    • Media / responsives modifiers
    • General formatting
    • Declaration Orders
    • Comments
    • Naming things
    • File structure
    • Files names and block names
  • implementation guides
    • Settings and tools
    • Responsive and modularity rules
Powered by GitBook
On this page
  • 4 spaces indentation :
  • Each opening block should be preceded by a blank line :
  • Each properties-value and opening block should be preceded and followed by line-break :

Was this helpful?

  1. Conventions

General formatting

4 spaces indentation :

.ga-button {
....color: blue;

....&__icon {
........margin-left: 1rem;    
....}
}

Each opening block should be preceded by a blank line :

.ga-button {
    color: blue;
    
    /* blank */
    &__icon {
        margin-left: 1rem;    
    }
}

Each properties-value and opening block should be preceded and followed by line-break :

( even for one line declarations )

.ga-button {
    color: blue;
}

PreviousMedia / responsives modifiersNextDeclaration Orders

Last updated 6 years ago

Was this helpful?