Learn BEM: CSS Naming Convention

In a Rocket
In a RocketIn a Rocket
โ€ขโ€ข
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 Modi๏ฌer
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
1 of 27

Recommended

BEM it! Introduction to BEM methodology by
BEM it! Introduction to BEM methodologyBEM it! Introduction to BEM methodology
BEM it! Introduction to BEM methodologyVarya Stepanova
1.9K viewsโ€ข60 slides
Html / CSS Presentation by
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
78.8K viewsโ€ข96 slides
BEM - CSS, Seriously by
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, SeriouslyRoland Lรถsslein
2.5K viewsโ€ข76 slides
Bootstrap 5 basic by
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basicJubair Ahmed Junjun
943 viewsโ€ข9 slides
CSS - OOCSS, SMACSS and more by
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
113.7K viewsโ€ข169 slides
Bliblidotcom - Reintroduction BEM CSS by
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSIrfan Maulana
1.5K viewsโ€ข15 slides

More Related Content

What's hot

CSS Best practice by
CSS Best practiceCSS Best practice
CSS Best practiceRuss Weakley
7.2K viewsโ€ข30 slides
Object Oriented CSS by
Object Oriented CSSObject Oriented CSS
Object Oriented CSSNicole Sullivan
283.2K viewsโ€ข64 slides
HTML5 by
HTML5HTML5
HTML5Hatem Mahmoud
25.9K viewsโ€ข86 slides
Flexbox and Grid Layout by
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
7K viewsโ€ข98 slides
Bootstrap 5 ppt by
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 pptMallikarjuna G D
3.8K viewsโ€ข73 slides
Introduction to Bootstrap by
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
41.8K viewsโ€ข32 slides

What's hot(20)

CSS Best practice by Russ Weakley
CSS Best practiceCSS Best practice
CSS Best practice
Russ Weakleyโ€ข7.2K views
Object Oriented CSS by Nicole Sullivan
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivanโ€ข283.2K views
HTML5 by Hatem Mahmoud
HTML5HTML5
HTML5
Hatem Mahmoudโ€ข25.9K views
Flexbox and Grid Layout by Rachel Andrew
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrewโ€ข7K views
Introduction to Bootstrap by Ron Reiter
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Ron Reiterโ€ข41.8K views
BEM It! for Brandwatch by Max Shirshin
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for Brandwatch
Max Shirshinโ€ข18.1K views
Pavel ungr designed_for_seo by H1.cz
Pavel ungr designed_for_seoPavel ungr designed_for_seo
Pavel ungr designed_for_seo
H1.czโ€ข1.1K views
์ถ”์ฒœ์‹œ์Šคํ…œ ์ด์ œ๋Š” ๋ˆ์ด ๋˜์–ด์•ผ ํ•œ๋‹ค. by choi kyumin
์ถ”์ฒœ์‹œ์Šคํ…œ ์ด์ œ๋Š” ๋ˆ์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.์ถ”์ฒœ์‹œ์Šคํ…œ ์ด์ œ๋Š” ๋ˆ์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.
์ถ”์ฒœ์‹œ์Šคํ…œ ์ด์ œ๋Š” ๋ˆ์ด ๋˜์–ด์•ผ ํ•œ๋‹ค.
choi kyuminโ€ข15.7K views
์ธํ”„๋Ÿฐ - ์Šคํƒ€ํŠธ์—… ์ธํ”„๋žฉ ์‹œ์ž‘ ์‚ฌ๋ก€ by Hyung Lee
์ธํ”„๋Ÿฐ - ์Šคํƒ€ํŠธ์—… ์ธํ”„๋žฉ ์‹œ์ž‘ ์‚ฌ๋ก€์ธํ”„๋Ÿฐ - ์Šคํƒ€ํŠธ์—… ์ธํ”„๋žฉ ์‹œ์ž‘ ์‚ฌ๋ก€
์ธํ”„๋Ÿฐ - ์Šคํƒ€ํŠธ์—… ์ธํ”„๋žฉ ์‹œ์ž‘ ์‚ฌ๋ก€
Hyung Leeโ€ข30.2K views
What is Object Oriented CSS? by Nicole Sullivan
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivanโ€ข43K views
Web components by Gil Fink
Web componentsWeb components
Web components
Gil Finkโ€ข517 views
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021 by Chris Green
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021
How to construct your own SEO a b split tests (for free) - BrightonSEO July 2021
Chris Greenโ€ข2.5K views
About Best friends - HTML, CSS and JS by Naga Harish M
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish Mโ€ข5K views
Frontend Crash Course: HTML and CSS by Thinkful
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkfulโ€ข750 views
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022... by LazarinaStoyanova
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
LazarinaStoyanovaโ€ข3.8K views
Html, CSS & Web Designing by Leslie Steele
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
Leslie Steeleโ€ข11.9K views
Little Big Data #1. ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์ธํ”„๋ผ by Seongyun Byeon
Little Big Data #1. ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์ธํ”„๋ผLittle Big Data #1. ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์ธํ”„๋ผ
Little Big Data #1. ๋ฐ”๋‹ฅ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ฐ์ดํ„ฐ ์ธํ”„๋ผ
Seongyun Byeonโ€ข16.9K views
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017 by Morten Rand-Hendriksen
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
Morten Rand-Hendriksenโ€ข63.5K views
Introduction of Html/css/js by Knoldus Inc.
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.โ€ข22.4K views

Viewers also liked

10 Color Banner Design Inspiration by
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design InspirationBannersnack
1.3M viewsโ€ข25 slides
Tips from Calvin and Hobbes on how to be a good customer by
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.
1.3M viewsโ€ข18 slides
How NOT to Run Your Company โ€“ Lessons Learned by
How NOT to Run Your Company โ€“ Lessons LearnedHow NOT to Run Your Company โ€“ Lessons Learned
How NOT to Run Your Company โ€“ Lessons LearnedWeekdone.com
775.8K viewsโ€ข14 slides
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba by
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
1.2M viewsโ€ข99 slides
Clickbait: A Guide To Writing Un-Ignorable Headlines by
Clickbait: A Guide To Writing Un-Ignorable HeadlinesClickbait: A Guide To Writing Un-Ignorable Headlines
Clickbait: A Guide To Writing Un-Ignorable HeadlinesVenngage
1.8M viewsโ€ข41 slides
How a Strong Brand Boosts B2B Demand by
How a Strong Brand Boosts B2B DemandHow a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B DemandGYK Antler
1.6M viewsโ€ข34 slides

Viewers also liked(20)

10 Color Banner Design Inspiration by Bannersnack
10 Color Banner Design Inspiration10 Color Banner Design Inspiration
10 Color Banner Design Inspiration
Bannersnackโ€ข1.3M views
Tips from Calvin and Hobbes on how to be a good customer by Freshdesk Inc.
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
Freshdesk Inc.โ€ข1.3M views
How NOT to Run Your Company โ€“ Lessons Learned by Weekdone.com
How NOT to Run Your Company โ€“ Lessons LearnedHow NOT to Run Your Company โ€“ Lessons Learned
How NOT to Run Your Company โ€“ Lessons Learned
Weekdone.comโ€ข775.8K views
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba by ux singapore
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
ux singaporeโ€ข1.2M views
Clickbait: A Guide To Writing Un-Ignorable Headlines by Venngage
Clickbait: A Guide To Writing Un-Ignorable HeadlinesClickbait: A Guide To Writing Un-Ignorable Headlines
Clickbait: A Guide To Writing Un-Ignorable Headlines
Venngageโ€ข1.8M views
How a Strong Brand Boosts B2B Demand by GYK Antler
How a Strong Brand Boosts B2B DemandHow a Strong Brand Boosts B2B Demand
How a Strong Brand Boosts B2B Demand
GYK Antlerโ€ข1.6M views
10 Engagement Lessons Learned From 1 Million Survey Answers by D B
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
D Bโ€ข1.2M views
Prototyping is an attitude by With Company
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitude
With Companyโ€ข1.4M views
Get Featured: So You Want to be on the Front Page of SlideShare? by Venngage
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โ€ข809.5K views
500 Demo Day Batch 19: Gluwa by 500 Startups
500 Demo Day Batch 19: Gluwa500 Demo Day Batch 19: Gluwa
500 Demo Day Batch 19: Gluwa
500 Startupsโ€ข814.7K views
Dispatches From The New Economy: The Five Faces Of The On-Demand Economy by Intuit Inc.
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
Intuit Inc.โ€ข949.9K views
38 Employee Engagement Ideas Your Team Will Love by Elodie A.
38 Employee Engagement Ideas Your Team Will Love38 Employee Engagement Ideas Your Team Will Love
38 Employee Engagement Ideas Your Team Will Love
Elodie A.โ€ข1.2M views
Designing Teams for Emerging Challenges by Aaron Irizarry
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
Aaron Irizarryโ€ข1.1M views
The Sketchnote Mini-Workshop by Mike Rohde
The Sketchnote Mini-WorkshopThe Sketchnote Mini-Workshop
The Sketchnote Mini-Workshop
Mike Rohdeโ€ข1.5M views
Top Productivity Working Hacks by Jan Rezab by Jan Rezab
Top Productivity Working Hacks by Jan RezabTop Productivity Working Hacks by Jan Rezab
Top Productivity Working Hacks by Jan Rezab
Jan Rezabโ€ข933.8K views
Fight for Yourself: How to Sell Your Ideas and Crush Presentations by Digital Surgeons
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
Digital Surgeons โ€ข1.3M views
10 Best Practices of a Best Company to Work For by O.C. Tanner
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
O.C. Tannerโ€ข1.2M views
How to Land that First Customer by Floown
How to Land that First CustomerHow to Land that First Customer
How to Land that First Customer
Floownโ€ข814.7K views
Mobile Is Eating the World (2016) by a16z
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
a16zโ€ข1.7M views
Towards Greatness by Abhishek Shah
Towards GreatnessTowards Greatness
Towards Greatness
Abhishek Shahโ€ข793.8K views

Similar to Learn BEM: CSS Naming Convention

BEM it! Introduction to BEM by
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEMVarya Stepanova
1.3K viewsโ€ข62 slides
BEM it! by
BEM it!BEM it!
BEM it!Max Shirshin
7.1K viewsโ€ข69 slides
BEM methodology overview by
BEM methodology overviewBEM methodology overview
BEM methodology overviewOleksii Prohonnyi
620 viewsโ€ข50 slides
BEM by
BEMBEM
BEMDmitriy Bogolyubov
192 viewsโ€ข54 slides
Learn SUIT: CSS Naming Convention by
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming ConventionIn a Rocket
5.1K viewsโ€ข35 slides
Workshop SASS for BEM development by
Workshop SASS for BEM developmentWorkshop SASS for BEM development
Workshop SASS for BEM developmentVittorio Vittori
150 viewsโ€ข50 slides

Similar to Learn BEM: CSS Naming Convention(16)

BEM it! Introduction to BEM by Varya Stepanova
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanovaโ€ข1.3K views
BEM it! by Max Shirshin
BEM it!BEM it!
BEM it!
Max Shirshinโ€ข7.1K views
Learn SUIT: CSS Naming Convention by In a Rocket
Learn SUIT: CSS Naming ConventionLearn SUIT: CSS Naming Convention
Learn SUIT: CSS Naming Convention
In a Rocketโ€ข5.1K views
Workshop SASS for BEM development by Vittorio Vittori
Workshop SASS for BEM developmentWorkshop SASS for BEM development
Workshop SASS for BEM development
Vittorio Vittoriโ€ข150 views
Let's BEM together by Amit Gupta
Let's BEM togetherLet's BEM together
Let's BEM together
Amit Guptaโ€ข275 views
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan by Deepu S Nath
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
Deepu S Nathโ€ข2.2K views
The Cascade is Dead by chriseppstein
The Cascade is DeadThe Cascade is Dead
The Cascade is Dead
chriseppsteinโ€ข2.9K views
BEM Methodology โ€” @Frontenders Ticino โ€”17/09/2014 by vzaccaria
BEM Methodology โ€” @Frontenders Ticino โ€”17/09/2014BEM Methodology โ€” @Frontenders Ticino โ€”17/09/2014
BEM Methodology โ€” @Frontenders Ticino โ€”17/09/2014
vzaccariaโ€ข2.9K views
Introduction to BEM Methodology by Merixstudio
Introduction to BEM MethodologyIntroduction to BEM Methodology
Introduction to BEM Methodology
Merixstudioโ€ข635 views
Do you want to contribute to volto? by Alok Kumar Singh
Do you want to contribute to volto?Do you want to contribute to volto?
Do you want to contribute to volto?
Alok Kumar Singhโ€ข91 views
WordPress HTML, CSS & Child Themes by Michelle Ames
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
Michelle Amesโ€ข481 views
Intro to OOCSS Workshop by Julie Cameron
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
Julie Cameronโ€ข1.6K views
Style Guide Driven Development: All Hail the Robot Overlords! by John Albin Wilkins
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โ€ข1K views
The benefits of BEM CSS by Bob Donderwinkel
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkelโ€ข12.8K views

More from In a Rocket

3- Learn Flexbox & CSS Grid / Container & items by
3- Learn Flexbox & CSS Grid / Container & items3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket
474 viewsโ€ข19 slides
2- Learn Flexbox & CSS Grid / Context by
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / ContextIn a Rocket
299 viewsโ€ข40 slides
1- Learn Flexbox & CSS Grid / Environment setup by
1- Learn Flexbox & CSS Grid / Environment setup1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket
347 viewsโ€ข27 slides
17- Learn CSS Fundamentals / Units by
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / UnitsIn a Rocket
307 viewsโ€ข20 slides
16- Learn CSS Fundamentals / Background by
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / BackgroundIn a Rocket
117 viewsโ€ข41 slides
15- Learn CSS Fundamentals / Color by
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / ColorIn a Rocket
159 viewsโ€ข37 slides

More from In a Rocket(15)

3- Learn Flexbox & CSS Grid / Container & items by In a Rocket
3- Learn Flexbox & CSS Grid / Container & items3- Learn Flexbox & CSS Grid / Container & items
3- Learn Flexbox & CSS Grid / Container & items
In a Rocketโ€ข474 views
2- Learn Flexbox & CSS Grid / Context by In a Rocket
2- Learn Flexbox & CSS Grid / Context2- Learn Flexbox & CSS Grid / Context
2- Learn Flexbox & CSS Grid / Context
In a Rocketโ€ข299 views
1- Learn Flexbox & CSS Grid / Environment setup by In a Rocket
1- Learn Flexbox & CSS Grid / Environment setup1- Learn Flexbox & CSS Grid / Environment setup
1- Learn Flexbox & CSS Grid / Environment setup
In a Rocketโ€ข347 views
17- Learn CSS Fundamentals / Units by In a Rocket
17- Learn CSS Fundamentals / Units17- Learn CSS Fundamentals / Units
17- Learn CSS Fundamentals / Units
In a Rocketโ€ข307 views
16- Learn CSS Fundamentals / Background by In a Rocket
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
In a Rocketโ€ข117 views
15- Learn CSS Fundamentals / Color by In a Rocket
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color
In a Rocketโ€ข159 views
14- Learn CSS Fundamentals / Inheritance by In a Rocket
14- Learn CSS Fundamentals / Inheritance14- Learn CSS Fundamentals / Inheritance
14- Learn CSS Fundamentals / Inheritance
In a Rocketโ€ข164 views
13- Learn CSS Fundamentals / Specificity by In a Rocket
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity
In a Rocketโ€ข174 views
12- Learn CSS Fundamentals / Mix & group by In a Rocket
12- Learn CSS Fundamentals / Mix & group12- Learn CSS Fundamentals / Mix & group
12- Learn CSS Fundamentals / Mix & group
In a Rocketโ€ข151 views
11- Learn CSS Fundamentals / Combinators by In a Rocket
11- Learn CSS Fundamentals / Combinators11- Learn CSS Fundamentals / Combinators
11- Learn CSS Fundamentals / Combinators
In a Rocketโ€ข99 views
10- Learn CSS Fundamentals / Pseudo-elements by In a Rocket
10- Learn CSS Fundamentals / Pseudo-elements10- Learn CSS Fundamentals / Pseudo-elements
10- Learn CSS Fundamentals / Pseudo-elements
In a Rocketโ€ข101 views
9- Learn CSS Fundamentals / Pseudo-classes by In a Rocket
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocketโ€ข169 views
8- Learn CSS Fundamentals / Attribute selectors by In a Rocket
8- Learn CSS Fundamentals / Attribute selectors8- Learn CSS Fundamentals / Attribute selectors
8- Learn CSS Fundamentals / Attribute selectors
In a Rocketโ€ข147 views
2- Learn HTML Fundamentals / Text Formatting by In a Rocket
2- Learn HTML Fundamentals / Text Formatting2- Learn HTML Fundamentals / Text Formatting
2- Learn HTML Fundamentals / Text Formatting
In a Rocketโ€ข208 views
1- Learn HTML Fundamentals / Start in 5 Minutes by In a Rocket
1- Learn HTML Fundamentals / Start in 5 Minutes1- Learn HTML Fundamentals / Start in 5 Minutes
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocketโ€ข255 views

Recently uploaded

Is Entireweb better than Google by
Is Entireweb better than GoogleIs Entireweb better than Google
Is Entireweb better than Googlesebastianthomasbejan
12 viewsโ€ข1 slide
PORTFOLIO 1 (Bret Michael Pepito).pdf by
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdfbrejess0410
8 viewsโ€ข6 slides
Marketing and Community Building in Web3 by
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3Federico Ast
12 viewsโ€ข64 slides
information by
informationinformation
informationkhelgishekhar
8 viewsโ€ข4 slides
UiPath Document Understanding_Day 3.pptx by
UiPath Document Understanding_Day 3.pptxUiPath Document Understanding_Day 3.pptx
UiPath Document Understanding_Day 3.pptxUiPathCommunity
103 viewsโ€ข25 slides
DU Series - Day 4.pptx by
DU Series - Day 4.pptxDU Series - Day 4.pptx
DU Series - Day 4.pptxUiPathCommunity
100 viewsโ€ข28 slides

Recently uploaded(12)

PORTFOLIO 1 (Bret Michael Pepito).pdf by brejess0410
PORTFOLIO 1 (Bret Michael Pepito).pdfPORTFOLIO 1 (Bret Michael Pepito).pdf
PORTFOLIO 1 (Bret Michael Pepito).pdf
brejess0410โ€ข8 views
Marketing and Community Building in Web3 by Federico Ast
Marketing and Community Building in Web3Marketing and Community Building in Web3
Marketing and Community Building in Web3
Federico Astโ€ข12 views
UiPath Document Understanding_Day 3.pptx by UiPathCommunity
UiPath Document Understanding_Day 3.pptxUiPath Document Understanding_Day 3.pptx
UiPath Document Understanding_Day 3.pptx
UiPathCommunityโ€ข103 views
DU Series - Day 4.pptx by UiPathCommunity
DU Series - Day 4.pptxDU Series - Day 4.pptx
DU Series - Day 4.pptx
UiPathCommunityโ€ข100 views
Building trust in our information ecosystem: who do we trust in an emergency by Tina Purnat
Building trust in our information ecosystem: who do we trust in an emergencyBuilding trust in our information ecosystem: who do we trust in an emergency
Building trust in our information ecosystem: who do we trust in an emergency
Tina Purnatโ€ข98 views
We see everywhere that many people are talking about technology.docx by ssuserc5935b
We see everywhere that many people are talking about technology.docxWe see everywhere that many people are talking about technology.docx
We see everywhere that many people are talking about technology.docx
ssuserc5935bโ€ข6 views
WEB 2.O TOOLS: Empowering education.pptx by narmadhamanohar21
WEB 2.O TOOLS: Empowering education.pptxWEB 2.O TOOLS: Empowering education.pptx
WEB 2.O TOOLS: Empowering education.pptx
narmadhamanohar21โ€ข16 views
IETF 118: Starlink Protocol Performance by APNIC
IETF 118: Starlink Protocol PerformanceIETF 118: Starlink Protocol Performance
IETF 118: Starlink Protocol Performance
APNICโ€ข244 views
๐’๐จ๐ฅ๐š๐ซ๐–๐ข๐ง๐๐ฌ ๐‚๐š๐ฌ๐ž ๐’๐ญ๐ฎ๐๐ฒ by Infosec train
๐’๐จ๐ฅ๐š๐ซ๐–๐ข๐ง๐๐ฌ ๐‚๐š๐ฌ๐ž ๐’๐ญ๐ฎ๐๐ฒ๐’๐จ๐ฅ๐š๐ซ๐–๐ข๐ง๐๐ฌ ๐‚๐š๐ฌ๐ž ๐’๐ญ๐ฎ๐๐ฒ
๐’๐จ๐ฅ๐š๐ซ๐–๐ข๐ง๐๐ฌ ๐‚๐š๐ฌ๐ž ๐’๐ญ๐ฎ๐๐ฒ
Infosec trainโ€ข9 views
How to think like a threat actor for Kubernetes.pptx by LibbySchulze1
How to think like a threat actor for Kubernetes.pptxHow to think like a threat actor for Kubernetes.pptx
How to think like a threat actor for Kubernetes.pptx
LibbySchulze1โ€ข5 views

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 Modi๏ฌer
  • 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