A
A
Atomic Design System architecture with SCSS, ITCSS
Search…
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
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
;
}
Conventions - Previous
Media / responsives modifiers
Next - Conventions
Declaration Orders
Last modified
3yr ago
Copy link
Outline
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 :