SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 

Tendances (20)

Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSS
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
The Power of CSS Flexbox
The Power of CSS FlexboxThe Power of CSS Flexbox
The Power of CSS Flexbox
 
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in C...
 
CSS Boc model
CSS Boc model CSS Boc model
CSS Boc model
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
Css box-model
Css box-modelCss box-model
Css box-model
 
21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Using command line to save time on common SEO tasks
Using command line to save time on common SEO tasks Using command line to save time on common SEO tasks
Using command line to save time on common SEO tasks
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 

En vedette

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
Intuit Inc.
 

En vedette (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
 

Similaire à Learn BEM: CSS Naming Convention

Similaire à Learn BEM: CSS Naming Convention (16)

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
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSS
 
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!
 

Plus de In a Rocket

16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
In a Rocket
 
15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color15- Learn CSS Fundamentals / Color
15- Learn CSS Fundamentals / Color
In a Rocket
 

Plus de 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
 

Dernier

Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
imonikaupta
 
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
ydyuyu
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Chandigarh Call girls 9053900678 Call girls in Chandigarh
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
@Chandigarh #call #Girls 9053900678 @Call #Girls in @Punjab 9053900678
 
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 

Dernier (20)

VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
Nanded City ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready ...Nanded City ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready ...
Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
 
Al Barsha Night Partner +0567686026 Call Girls Dubai
Al Barsha Night Partner +0567686026 Call Girls  DubaiAl Barsha Night Partner +0567686026 Call Girls  Dubai
Al Barsha Night Partner +0567686026 Call Girls Dubai
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
 
Dubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls Dubai
Dubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls DubaiDubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls Dubai
Dubai=Desi Dubai Call Girls O525547819 Outdoor Call Girls Dubai
 
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
 
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
 
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
 
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
📱Dehradun Call Girls Service 📱☎️ +91'905,3900,678 ☎️📱 Call Girls In Dehradun 📱
 
Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...
Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...
Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...
 
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查在线制作约克大学毕业证(yu毕业证)在读证明认证可查
在线制作约克大学毕业证(yu毕业证)在读证明认证可查
 
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
 
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort ServiceBusty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
 
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
VVIP Pune Call Girls Sinhagad WhatSapp Number 8005736733 With Elite Staff And...
 
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
6.High Profile Call Girls In Punjab +919053900678 Punjab Call GirlHigh Profil...
 
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Pollachi 7001035870 Whatsapp Number, 24/07 Booking
 

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