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
Our flavor of BEM
Our flavor of BEM selectors :
If you read the docs you have seen that ther is not one convention but many.
The one that we will use is the following :
.pr-block-name
{}
.pr-block-name__element-name
{}
.pr-block-name--modifier-name
{}
.pr-block-name__element-name--modifier-name
{}
To summarize:
We need a
prefix
symbolized by
.pr-
here
Words
are separated by a
-
in a kebab case fashion
Element
entity is preceded by two low dashes
__element-name
Modifiers
are separated by two 'middle' dashes
--modifier-name
For now, don't care about the prefix
.pr-
part, it will be explained later, in the
BEMIT
related page of this doc.
Syntactic sugar with SCSS
With SCSS we use the
&
to call the parent selector name and add the required BEM entity at the end :
.pr-block-name
{
/* .pr-block-name {} */
&--modifier-name
{
/* .pr-block-name--modifier-name {} */
}
&__element-name
{
/* .pr-block-name__element-name {} */
&--modifier-name
{
/* .pr-block-name__element-name--modifier-name {} */
}
}
}
If you ask me, typing less is always cool, but the coolest part is that it create this kind of nesting structure that illustrate even more the relationship between the different entities.
Conventions - Previous
BEM : presentation
Next - Conventions
Prefixes
Last modified
3yr ago
Copy link
Outline
Our flavor of BEM selectors :
To summarize:
Syntactic sugar with SCSS