SlideShare a Scribd company logo
1 of 27
Download to read offline
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

More Related Content

What's hot

Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Clickminded Agency Growth SOP Toolkit
Clickminded Agency Growth SOP ToolkitClickminded Agency Growth SOP Toolkit
Clickminded Agency Growth SOP ToolkitClickMinded
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model PresentationReed Crouch
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEMVarya Stepanova
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats newSandun Perera
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
Pillar Content Strategy
Pillar Content StrategyPillar Content Strategy
Pillar Content StrategyKnoxville HUG
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Log File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkitLog File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkitTom Bennet
 
Practical SEO for Developers - An Introduction
Practical SEO for Developers - An IntroductionPractical SEO for Developers - An Introduction
Practical SEO for Developers - An IntroductionNoel Flowers
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)Daniel Friedman
 

What's hot (20)

Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
Clickminded Agency Growth SOP Toolkit
Clickminded Agency Growth SOP ToolkitClickminded Agency Growth SOP Toolkit
Clickminded Agency Growth SOP Toolkit
 
CSS Box Model Presentation
CSS Box Model PresentationCSS Box Model Presentation
CSS Box Model Presentation
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
CSS
CSSCSS
CSS
 
Pillar Content Strategy
Pillar Content StrategyPillar Content Strategy
Pillar Content Strategy
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Lab#5 style and selector
Lab#5 style and selectorLab#5 style and selector
Lab#5 style and selector
 
Log File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkitLog File Analysis: The most powerful tool in your SEO toolkit
Log File Analysis: The most powerful tool in your SEO toolkit
 
Practical SEO for Developers - An Introduction
Practical SEO for Developers - An IntroductionPractical SEO for Developers - An Introduction
Practical SEO for Developers - An Introduction
 
Navigation and Link
Navigation and LinkNavigation and Link
Navigation and Link
 
Inline, Block and Positioning in CSS
Inline, Block and Positioning in CSSInline, Block and Positioning in CSS
Inline, Block and Positioning in CSS
 
HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)HTML/CSS Crash Course (april 4 2017)
HTML/CSS Crash Course (april 4 2017)
 

Viewers also liked

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
 

Viewers also liked (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
 

Similar to 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
 
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
 

Similar to Learn BEM: CSS Naming Convention (14)

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?
 
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!
 

More from 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
 

More from 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
 

Recently uploaded

LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 

Recently uploaded (12)

LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 

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