SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Downloaden Sie, um offline zu lesen
inarocket.com
Learn at rocket speed
BEMCSS NAMING CONVENTION
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
in a
ROCKET
BEM FUNDAMENTALS
Understanding BEM in just 2 minutes
LEARN BEM: Block - Element - Modifier
B E M
Is a naming convention
for classes in HTML and CSS
Developed by the team at Yandex.
Block Element Modifier
LEARN BEM: Block - Element - Modifier
B E MBLOCK: Encapsulates a standalone entity that is meaningful on its own.
While blocks can be nested and interact with each other, semantically they
remain equal; there is no precedence or hierarchy.
LEARN BEM: Block - Element - Modifier
BLOCK
LEARN BEM: Block - Element - Modifier
B E MELEMENT: Parts of a block and have no standalone meaning. Any element is
semantically tied to its block.
LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
LEARN BEM: Block - Element - Modifier
B E MMODIFIER: Flags on blocks or elements. Use them to change appearance,
behavior or state.
LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK+ MODIFIER
ELEMENT
ELEMENT
ELEMENT
ELEMENT
LEARN BEM: Block - Element - Modifier
BLOCK BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK+ MODIFIER
ELEMENT
ELEMENT
ELEMENT
ELEMENT
BLOCK
ELEMENT
ELEMENT
ELEMENT
ELEMENT
+ MODIFIER
in a
ROCKET
QUICK EXAMPLE
How it works with a real example
LEARN BEM: Block - Element - Modifier
$150 SUBSCRIBE NOW
LEARN BEM: Block - Element - Modifier
BLOCK: btn
LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
BLOCK: btn + MODIFIER
$150 SUBSCRIBE NOW
LEARN BEM: Block - Element - Modifier
BLOCK: btn BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
BLOCK: btn + MODIFIER
$150 SUBSCRIBE NOW
BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT + MODIFIER
in a
ROCKET
LET'S CODE
BEM syntax you can start using right now
BEM SYNTAX
$150 SUBSCRIBE NOW
LEARN BEM: Block - Element - Modifier
.block
Examples: .btn or .login-form
.block__element
Examples: .btn__price or .btn__text
.block--modifier

Examples: .btn--important

.block__element--modifier
Examples: .btn__text--important
$150 SUBSCRIBE NOW
BLOCKS
ELEMENTS
MODIFIERS
LEARN BEM: Block - Element - Modifier
BLOCK: btn
styles.css
/* Block */
.btn { styles here }
CSS
index.html
<a href="#" class="btn"></a>
HTML
LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
ELEMENT: price ELEMENT: text
styles.css
/* Block */
.btn { styles here }
/* Elements: depend upon the block */
.btn__price { styles here }
.btn__text { styles here }
CSS
index.html
<a href="#" class="btn">
<span class="btn__price">$150</span>
<span class="btn__text">Subscribe now</span>
</a>
HTML
LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
styles.css
/* Block */
.btn { styles here }
/* Elements: depend upon the block */
.btn__price { styles here }
.btn__text { styles here }
/* Modifier: change the style of the block */
.btn--important { styles here }
CSS
index.html
<a href="#" class="btn btn--important">
<span class="btn__price">$150</span>
<span class="btn__text">Subscribe now</span>
</a>
HTML
LEARN BEM: Block - Element - Modifier
BLOCK: btn
$150 SUBSCRIBE NOW
styles.css
/* Block */
.btn { styles here }
/* Elements: depend upon the block */
.btn__price { styles here }
.btn__text { styles here }
/* Modifier: change the style of the element */
.btn__text--important { styles here }
CSS
index.html
<a href="subscribe.html" class="btn">
<span class="btn__price">$150</span>
<span class="btn__text btn__text--important">Subscribe
now</span>
</a>
HTML
USEFUL REFERENCES
LEARN BEM: Block - Element - Modifier
BEM METHODOLOGY: NAMING CONVENTION
The BEM methodology provides an idea for creating naming rules and implements that
idea in its canonical CSS selector naming convention.
bem.info/methodology/naming-convention
CONVENTION BY HARRY ROBERTS
"BEM-like" convention of CSS Guidelines by Harry Roberts.
bem.info/toolbox/sdk/bem-naming/#convention-by-harry-roberts
Are you also interested in learning
BOOTSTRAP 4
POSTCSS?
+
http://inarocket.teachable.com/courses/css-postcss
Please visit:
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
inarocket.com
Learn at rocket speed
BEMCSS NAMING CONVENTION

Weitere ähnliche Inhalte

Was ist angesagt?

OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?Michael Posso
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for BrandwatchMax Shirshin
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overviewJacob Nelson
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheetMichael Jhon
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsSvitlana Ivanytska
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design Mindy McAdams
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSIrfan Maulana
 

Was ist angesagt? (20)

OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?OOCSS, SMACSS or BEM?
OOCSS, SMACSS or BEM?
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for Brandwatch
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
HTML5
HTML5HTML5
HTML5
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
CSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive LayoutsCSS3 Media Queries And Creating Adaptive Layouts
CSS3 Media Queries And Creating Adaptive Layouts
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Html bangla
Html banglaHtml bangla
Html bangla
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSS
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
Bem methodology
Bem methodologyBem methodology
Bem methodology
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 

Andere mochten auch

10 Color Banner Design Inspiration
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design InspirationBannersnack
 
Tips from Calvin and Hobbes on how to be a good customer
Tips from Calvin and Hobbes on how to be a good customerTips from Calvin and Hobbes on how to be a good customer
Tips from Calvin and Hobbes on how to be a good customerFreshdesk Inc.
 
How NOT to Run Your Company – Lessons Learned
How NOT to Run Your Company – Lessons LearnedHow NOT to Run Your Company – Lessons Learned
How NOT to Run Your Company – Lessons LearnedWeekdone.com
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldabaux singapore
 
Clickbait: A Guide To Writing Un-Ignorable Headlines
Clickbait: A Guide To Writing Un-Ignorable HeadlinesClickbait: A Guide To Writing Un-Ignorable Headlines
Clickbait: A Guide To Writing Un-Ignorable HeadlinesVenngage
 
How a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B DemandHow a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B DemandGYK Antler
 
10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey Answers10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey AnswersD B
 
Prototyping is an attitude
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitudeWith Company
 
Get Featured: So You Want to be on the Front Page of SlideShare?
Get Featured: So You Want to be on the Front Page of SlideShare?Get Featured: So You Want to be on the Front Page of SlideShare?
Get Featured: So You Want to be on the Front Page of SlideShare?Venngage
 
500 Demo Day Batch 19: Gluwa
500 Demo Day Batch 19: Gluwa500 Demo Day Batch 19: Gluwa
500 Demo Day Batch 19: Gluwa500 Startups
 
Dispatches From The New Economy: The Five Faces Of The On-Demand Economy
Dispatches From The New Economy: The Five Faces Of The On-Demand EconomyDispatches From The New Economy: The Five Faces Of The On-Demand Economy
Dispatches From The New Economy: The Five Faces Of The On-Demand EconomyIntuit Inc.
 
38 Employee Engagement Ideas Your Team Will Love
38 Employee Engagement Ideas Your Team Will Love38 Employee Engagement Ideas Your Team Will Love
38 Employee Engagement Ideas Your Team Will LoveElodie A.
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
 
The Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopMike Rohde
 
Top Productivity Working Hacks by Jan Rezab
Top Productivity Working Hacks by Jan RezabTop Productivity Working Hacks by Jan Rezab
Top Productivity Working Hacks by Jan RezabJan Rezab
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsDigital Surgeons
 
10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work ForO.C. Tanner
 
How to Land that First Customer
How to Land that First CustomerHow to Land that First Customer
How to Land that First CustomerFloown
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)a16z
 

Andere mochten auch (20)

10 Color Banner Design Inspiration
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design Inspiration
 
Tips from Calvin and Hobbes on how to be a good customer
Tips from Calvin and Hobbes on how to be a good customerTips from Calvin and Hobbes on how to be a good customer
Tips from Calvin and Hobbes on how to be a good customer
 
How NOT to Run Your Company – Lessons Learned
How NOT to Run Your Company – Lessons LearnedHow NOT to Run Your Company – Lessons Learned
How NOT to Run Your Company – Lessons Learned
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
 
Clickbait: A Guide To Writing Un-Ignorable Headlines
Clickbait: A Guide To Writing Un-Ignorable HeadlinesClickbait: A Guide To Writing Un-Ignorable Headlines
Clickbait: A Guide To Writing Un-Ignorable Headlines
 
How a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B DemandHow a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B Demand
 
10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey Answers10 Engagement Lessons Learned From 1 Million Survey Answers
10 Engagement Lessons Learned From 1 Million Survey Answers
 
Prototyping is an attitude
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitude
 
Get Featured: So You Want to be on the Front Page of SlideShare?
Get Featured: So You Want to be on the Front Page of SlideShare?Get Featured: So You Want to be on the Front Page of SlideShare?
Get Featured: So You Want to be on the Front Page of SlideShare?
 
500 Demo Day Batch 19: Gluwa
500 Demo Day Batch 19: Gluwa500 Demo Day Batch 19: Gluwa
500 Demo Day Batch 19: Gluwa
 
Dispatches From The New Economy: The Five Faces Of The On-Demand Economy
Dispatches From The New Economy: The Five Faces Of The On-Demand EconomyDispatches From The New Economy: The Five Faces Of The On-Demand Economy
Dispatches From The New Economy: The Five Faces Of The On-Demand Economy
 
38 Employee Engagement Ideas Your Team Will Love
38 Employee Engagement Ideas Your Team Will Love38 Employee Engagement Ideas Your Team Will Love
38 Employee Engagement Ideas Your Team Will Love
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
The Sketchnote Mini-Workshop
The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-Workshop
 
Top Productivity Working Hacks by Jan Rezab
Top Productivity Working Hacks by Jan RezabTop Productivity Working Hacks by Jan Rezab
Top Productivity Working Hacks by Jan Rezab
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
 
10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For10 Best Practices of a Best Company to Work For
10 Best Practices of a Best Company to Work For
 
How to Land that First Customer
How to Land that First CustomerHow to Land that First Customer
How to Land that First Customer
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
 
Towards Greatness
Towards GreatnessTowards Greatness
Towards Greatness
 

Ähnlich wie Learn BEM: CSS Naming Convention

Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionIn a Rocket
 
Workshop SASS for BEM development
Workshop SASS for BEM developmentWorkshop SASS for BEM development
Workshop SASS for BEM developmentVittorio Vittori
 
Let's BEM together
Let's BEM togetherLet's BEM together
Let's BEM togetherAmit Gupta
 
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanFront end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanDeepu S Nath
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014vzaccaria
 
Introduction to BEM Methodology
Introduction to BEM MethodologyIntroduction to BEM Methodology
Introduction to BEM MethodologyMerixstudio
 
Do you want to contribute to volto?
Do you want to contribute to volto?Do you want to contribute to volto?
Do you want to contribute to volto?Alok Kumar Singh
 
Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Evan Mullins
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS WorkshopJulie Cameron
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!John Albin Wilkins
 

Ähnlich wie Learn BEM: CSS Naming Convention (15)

BEM it!
BEM it!BEM it!
BEM it!
 
BEM methodology overview
BEM methodology overviewBEM methodology overview
BEM methodology overview
 
BEM
BEMBEM
BEM
 
Learn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
 
Workshop SASS for BEM development
Workshop SASS for BEM developmentWorkshop SASS for BEM development
Workshop SASS for BEM development
 
Let's BEM together
Let's BEM togetherLet's BEM together
Let's BEM together
 
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanFront end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
 
The Cascade is Dead
The Cascade is DeadThe Cascade is Dead
The Cascade is Dead
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
 
Introduction to BEM Methodology
Introduction to BEM MethodologyIntroduction to BEM Methodology
Introduction to BEM Methodology
 
Do you want to contribute to volto?
Do you want to contribute to volto?Do you want to contribute to volto?
Do you want to contribute to volto?
 
Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!Blockity McBlock Blocks, Oh My!
Blockity McBlock Blocks, Oh My!
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
 
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
 

Mehr von In a Rocket

3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket
 
2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / ContextIn a Rocket
 
1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket
 
17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / UnitsIn a Rocket
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / BackgroundIn a Rocket
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / ColorIn a Rocket
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / InheritanceIn a Rocket
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / SpecificityIn a Rocket
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & groupIn a Rocket
 
11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / CombinatorsIn a Rocket
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket
 
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text FormattingIn a Rocket
 
1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket
 

Mehr von In a Rocket (15)

3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items
 
2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context
 
1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup
 
17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color
 
14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity
 
12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group
 
11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators
 
10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements
 
9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
 
8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors
 
2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting
 
1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes
 

Kürzlich hochgeladen

Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Internet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxInternet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxErYashwantJagtap
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 

Kürzlich hochgeladen (15)

Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Internet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxInternet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptx
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 

Learn BEM: CSS Naming Convention

  • 1. inarocket.com Learn at rocket speed BEMCSS NAMING CONVENTION
  • 2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  • 4. LEARN BEM: Block - Element - Modifier B E M Is a naming convention for classes in HTML and CSS Developed by the team at Yandex. Block Element Modifier
  • 5. LEARN BEM: Block - Element - Modifier B E MBLOCK: Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
  • 6. LEARN BEM: Block - Element - Modifier BLOCK
  • 7. LEARN BEM: Block - Element - Modifier B E MELEMENT: Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
  • 8. LEARN BEM: Block - Element - Modifier BLOCK BLOCK ELEMENT ELEMENT ELEMENT ELEMENT
  • 9. LEARN BEM: Block - Element - Modifier B E MMODIFIER: Flags on blocks or elements. Use them to change appearance, behavior or state.
  • 10. LEARN BEM: Block - Element - Modifier BLOCK BLOCK ELEMENT ELEMENT ELEMENT ELEMENT BLOCK+ MODIFIER ELEMENT ELEMENT ELEMENT ELEMENT
  • 11. LEARN BEM: Block - Element - Modifier BLOCK BLOCK ELEMENT ELEMENT ELEMENT ELEMENT BLOCK+ MODIFIER ELEMENT ELEMENT ELEMENT ELEMENT BLOCK ELEMENT ELEMENT ELEMENT ELEMENT + MODIFIER
  • 12. in a ROCKET QUICK EXAMPLE How it works with a real example
  • 13. LEARN BEM: Block - Element - Modifier $150 SUBSCRIBE NOW
  • 14. LEARN BEM: Block - Element - Modifier BLOCK: btn
  • 15. LEARN BEM: Block - Element - Modifier BLOCK: btn BLOCK: btn $150 SUBSCRIBE NOW ELEMENT: price ELEMENT: text
  • 16. LEARN BEM: Block - Element - Modifier BLOCK: btn BLOCK: btn $150 SUBSCRIBE NOW ELEMENT: price ELEMENT: text BLOCK: btn + MODIFIER $150 SUBSCRIBE NOW
  • 17. LEARN BEM: Block - Element - Modifier BLOCK: btn BLOCK: btn $150 SUBSCRIBE NOW ELEMENT: price ELEMENT: text BLOCK: btn + MODIFIER $150 SUBSCRIBE NOW BLOCK: btn $150 SUBSCRIBE NOW ELEMENT + MODIFIER
  • 18. in a ROCKET LET'S CODE BEM syntax you can start using right now
  • 19. BEM SYNTAX $150 SUBSCRIBE NOW LEARN BEM: Block - Element - Modifier .block Examples: .btn or .login-form .block__element Examples: .btn__price or .btn__text .block--modifier
 Examples: .btn--important
 .block__element--modifier Examples: .btn__text--important $150 SUBSCRIBE NOW BLOCKS ELEMENTS MODIFIERS
  • 20. LEARN BEM: Block - Element - Modifier BLOCK: btn styles.css /* Block */ .btn { styles here } CSS index.html <a href="#" class="btn"></a> HTML
  • 21. LEARN BEM: Block - Element - Modifier BLOCK: btn $150 SUBSCRIBE NOW ELEMENT: price ELEMENT: text styles.css /* Block */ .btn { styles here } /* Elements: depend upon the block */ .btn__price { styles here } .btn__text { styles here } CSS index.html <a href="#" class="btn"> <span class="btn__price">$150</span> <span class="btn__text">Subscribe now</span> </a> HTML
  • 22. LEARN BEM: Block - Element - Modifier BLOCK: btn $150 SUBSCRIBE NOW styles.css /* Block */ .btn { styles here } /* Elements: depend upon the block */ .btn__price { styles here } .btn__text { styles here } /* Modifier: change the style of the block */ .btn--important { styles here } CSS index.html <a href="#" class="btn btn--important"> <span class="btn__price">$150</span> <span class="btn__text">Subscribe now</span> </a> HTML
  • 23. LEARN BEM: Block - Element - Modifier BLOCK: btn $150 SUBSCRIBE NOW styles.css /* Block */ .btn { styles here } /* Elements: depend upon the block */ .btn__price { styles here } .btn__text { styles here } /* Modifier: change the style of the element */ .btn__text--important { styles here } CSS index.html <a href="subscribe.html" class="btn"> <span class="btn__price">$150</span> <span class="btn__text btn__text--important">Subscribe now</span> </a> HTML
  • 24. USEFUL REFERENCES LEARN BEM: Block - Element - Modifier BEM METHODOLOGY: NAMING CONVENTION The BEM methodology provides an idea for creating naming rules and implements that idea in its canonical CSS selector naming convention. bem.info/methodology/naming-convention CONVENTION BY HARRY ROBERTS "BEM-like" convention of CSS Guidelines by Harry Roberts. bem.info/toolbox/sdk/bem-naming/#convention-by-harry-roberts
  • 25. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
  • 26. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  • 27. inarocket.com Learn at rocket speed BEMCSS NAMING CONVENTION