SlideShare a Scribd company logo
1 of 35
Download to read offline
inarocket.com
Learn at rocket speed
SUITCSS NAMING CONVENTION
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
in a
ROCKET
SUIT FUNDAMENTALS
Understanding SUIT in just 2 minutes
A BEM-based naming convention that helps to scope component
CSS and make your widgets render more predictably.
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIES
Developed by Nicholas Gallagher.
SUIT
SUIT comprises:
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIES
SUIT
Within components there can be Modifiers, Descendants and States.
A BEM-based naming convention that helps to scope component
CSS and make your widgets render more predictably.
SUIT comprises:
LEARN SUIT: CSS naming conventions
COMPONENT
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
A component descendent is a class that is attached to a descendent node of a component.
It's responsible for applying presentation directly to the descendent on behalf of a particular
component.
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ MODIFIER
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
A component modifier is a class that modifies the presentation of the base component in
some form.
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ MODIFIER
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ STATE
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
Use is-stateName to reflect changes to a component's state. Never style these classes
directly; they should always be used as an adjoining class.
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ MODIFIER
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
+ STATE
Use is-stateName to reflect changes to a component's state. Never style these classes
directly; they should always be used as an adjoining class.
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIES
SUIT
Utility classes map to fixed, low-level, structural and positional traits.
A BEM-based naming convention that helps to scope component
CSS and make your widgets render more predictably.
SUIT comprises:
LEARN SUIT: CSS naming conventions
Certain CSS properties and patterns are used frequently.
For example: floats, containing floats, vertical alignment, text truncation.
Utilities:
• can help to reduce repetition and provide
consistent implementations.
• can be added to any element; multiple utilities
can be used together; and utilities can be
used alongside component classes.
example.css
<div class="Tweet u-cf">
<a class="u-sizeFit" href="{{url}}">
<img class="u-block" src="{{src}}" alt="">
</a>
<p class="Tweet-text u-sizeFill u-textBreak">
…
</p>
</div>
UTILITIES
Utilities are grouped by type. The names of utilities with similar concerns
usually start with a common string, e.g., u-textCenter, u-textTruncate; u-
linkClean, u-linkBlock.
SOURCE: SUIT CSS - Utilities.
in a
ROCKET
QUICK EXAMPLE
How it works with a real example
LEARN SUIT: CSS naming conventions
$150 SUBSCRIBE NOW
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPONENT + MODIFIER: important
$150 SUBSCRIBE NOW
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPONENT + MODIFIER: important
$150 SUBSCRIBE NOW $150 SUBSCRIBE NOW
COMPONENT + STATE: is-active
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPONENT + MODIFIER: important
$150 SUBSCRIBE NOW
COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT + STATE: is-active
in a
ROCKET
LET'S CODE
SUIT syntax you can start using right now
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentName
Must be written in pascal case.
Examples: .MyBtn or .LoginForm
COMPONENTS
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentName
Must be written in pascal case.
Examples: .MyBtn or .LoginForm
.ComponentName-descendentName
Must be written in camel case.
Examples: .MyBtn-priceBox or .MyBtn-textBox
$150 SUBSCRIBE NOW
COMPONENTS
DESCENDENTS
SUIT SYNTAX
$150 SUBSCRIBE NOW
LEARN SUIT: CSS naming conventions
.ComponentName
Must be written in pascal case.
Examples: .MyBtn or .LoginForm
.ComponentName-descendentName
Must be written in camel case.
Examples: .MyBtn-priceBox or .MyBtn-textBox
$150 SUBSCRIBE NOW
COMPONENTS
DESCENDENTS
MODIFIERS
.ComponentName--modifierName
Must be written in camel case.
Examples: .MyBtn--important
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL firstCamel secondCamel
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL
ComponentName
Must be written in pascal case.
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL firstCamel
ComponentName -descendentName
Must be written in camel case.Must be written in pascal case.
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work with this things ;)
PascaL firstCamel secondCamel
ComponentName -descendentName --modifierName
Must be written in camel case. Must be written in camel case.Must be written in pascal case.
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
styles.css
/* Component */
.MyBtn { styles here }
CSS
index.html
<a href="#" class="MyBtn"></a>
HTML
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
styles.css
/* Component */
.MyBtn { styles here }
/* Descendents: depend upon the component */
.MyBtn-price { styles here }
.MyBtn-text { styles here }
CSS
index.html
<a href="#" class="MyBtn">
<span class="MyBtn-price">$150</span>
<span class="MyBtn-text">Subscribe now</span>
</a>
HTML
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
styles.css
/* Component */
.MyBtn { styles here }
/* Descendents: depend upon the component */
.MyBtn-price { styles here }
.MyBtn-text { styles here }
/* Modifier: change style of the component */
.MyBtn--important { styles here }
CSS
index.html
<a href="#" class="MyBtn MyBtn--important">
<span class="MyBtn-price">$150</span>
<span class="MyBtn-text">Subscribe now</span>
</a>
HTML
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
styles.css
/* Component */
.MyBtn { styles here }
/* Descendents: depend upon the component */
.MyBtn-price { styles here }
.MyBtn-text { styles here }
/* Modifier: change style of the component */
.MyBtn-text--important { styles here }
CSS
index.html
<a href="subscribe.html" class="MyBtn">
<span class="MyBtn-price">$150</span>
<span class="MyBtn-text MyBtn-text--important">Subscribe
now</span>
</a>
HTML
USEFUL REFERENCES
LEARN SUIT: CSS naming conventions
SUIT CSS: NAMING CONVENTIONS
SUIT CSS relies on structured class names and meaningful hyphens.
github.com/suitcss/suit/blob/master/doc/naming-conventions.md
SUIT CSS: STYLE TOOLS FOR UI COMPONENTS
SUIT CSS is a reliable and testable styling methodology for component-based UI
development.
suitcss.github.io
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
SUITCSS NAMING CONVENTION

More Related Content

What's hot

Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS ExamplesMohamed Loey
 
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationAngular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationWebStackAcademy
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript TutorialDHTMLExtreme
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFu Cheng
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة anees abu-hmaid
 
Chapter 07 php forms handling
Chapter 07   php forms handlingChapter 07   php forms handling
Chapter 07 php forms handlingDhani Ahmad
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 

What's hot (20)

BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Html
HtmlHtml
Html
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS Examples
 
Angular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and AuthorizationAngular - Chapter 9 - Authentication and Authorization
Angular - Chapter 9 - Authentication and Authorization
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript Tutorial
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Profissão Front-end
Profissão Front-endProfissão Front-end
Profissão Front-end
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Chapter 07 php forms handling
Chapter 07   php forms handlingChapter 07   php forms handling
Chapter 07 php forms handling
 
Javascript
JavascriptJavascript
Javascript
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 
Html basics
Html basicsHtml basics
Html basics
 
Html basic tags
Html basic tagsHtml basic tags
Html basic tags
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Git - Level 2
Git - Level 2Git - Level 2
Git - Level 2
 

Similar to Learn SUIT: CSS Naming Convention

SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass UpMina Markham
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS MethodologyZohar Arad
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding StandardsSaajan Maharjan
 
Get Started With Tailwind React and Create Beautiful Apps.pdf
Get Started With Tailwind React and Create Beautiful Apps.pdfGet Started With Tailwind React and Create Beautiful Apps.pdf
Get Started With Tailwind React and Create Beautiful Apps.pdfRonDosh
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsQA TrainingHub
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptxVarunMM2
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptxVarunMM2
 
Wordpress workflow for an agency world
Wordpress workflow for an agency worldWordpress workflow for an agency world
Wordpress workflow for an agency worldChris Lowe
 
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
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptRadheshyam Kori
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...Michael Posso
 

Similar to Learn SUIT: CSS Naming Convention (20)

Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass Up
 
Css Systems
Css SystemsCss Systems
Css Systems
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding Standards
 
Get Started With Tailwind React and Create Beautiful Apps.pdf
Get Started With Tailwind React and Create Beautiful Apps.pdfGet Started With Tailwind React and Create Beautiful Apps.pdf
Get Started With Tailwind React and Create Beautiful Apps.pdf
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
 
2_css.pptx
2_css.pptx2_css.pptx
2_css.pptx
 
Wordpress workflow for an agency world
Wordpress workflow for an agency worldWordpress workflow for an agency world
Wordpress workflow for an agency world
 
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
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...OOCSS, SMACSS or BEM, what is the question...
OOCSS, SMACSS or BEM, what is the question...
 

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

Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Managementseank14
 
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303Dewi Agency
 
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0APNIC
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebJie Liau
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理A
 
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理AS
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理A
 
Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Dewi Agency
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理AS
 
APNIC Updates presented by Paul Wilson at CaribNOG 27
APNIC Updates presented by Paul Wilson at  CaribNOG 27APNIC Updates presented by Paul Wilson at  CaribNOG 27
APNIC Updates presented by Paul Wilson at CaribNOG 27APNIC
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书A
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...musaddumba454
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsrahman018755
 
Dan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat HoodieDan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat Hoodierahman018755
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirtrahman018755
 
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...Varun Mithran
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsrahman018755
 
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理apekaom
 
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样AS
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证hfkmxufye
 

Recently uploaded (20)

Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
 
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303Lowongan Kerja LC Yogyakarta Terbaru 085746015303
Lowongan Kerja LC Yogyakarta Terbaru 085746015303
 
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
 
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWebiThome_CYBERSEC2024_Drive_Into_the_DarkWeb
iThome_CYBERSEC2024_Drive_Into_the_DarkWeb
 
一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理一比一原版美国北卡罗莱纳大学毕业证如何办理
一比一原版美国北卡罗莱纳大学毕业证如何办理
 
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
 
Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303Loker Pemandu Lagu LC Semarang 085746015303
Loker Pemandu Lagu LC Semarang 085746015303
 
一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理一比一原版英国格林多大学毕业证如何办理
一比一原版英国格林多大学毕业证如何办理
 
APNIC Updates presented by Paul Wilson at CaribNOG 27
APNIC Updates presented by Paul Wilson at  CaribNOG 27APNIC Updates presented by Paul Wilson at  CaribNOG 27
APNIC Updates presented by Paul Wilson at CaribNOG 27
 
一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书一比一定制加州大学欧文分校毕业证学位证书
一比一定制加州大学欧文分校毕业证学位证书
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
 
Thank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirtsThank You Luv I’ll Never Walk Alone Again T shirts
Thank You Luv I’ll Never Walk Alone Again T shirts
 
Dan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat HoodieDan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat Hoodie
 
I’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 ShirtI’ll See Y’All Motherfuckers In Game 7 Shirt
I’ll See Y’All Motherfuckers In Game 7 Shirt
 
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
SOC Analyst Guide For Beginners SOC analysts work as members of a managed sec...
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
 
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
一比一原版桑佛德大学毕业证成绩单申请学校Offer快速办理
 
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
原版定制(Glasgow毕业证书)英国格拉斯哥大学毕业证原件一模一样
 
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCLA毕业证)加州大学洛杉矶分校毕业证成绩单本科硕士学位证留信学历认证
 

Learn SUIT: CSS Naming Convention

  • 1. inarocket.com Learn at rocket speed SUITCSS NAMING CONVENTION
  • 2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  • 4. A BEM-based naming convention that helps to scope component CSS and make your widgets render more predictably. LEARN SUIT: CSS naming conventions +COMPONENTS UTILITIES Developed by Nicholas Gallagher. SUIT SUIT comprises:
  • 5. LEARN SUIT: CSS naming conventions +COMPONENTS UTILITIES SUIT Within components there can be Modifiers, Descendants and States. A BEM-based naming convention that helps to scope component CSS and make your widgets render more predictably. SUIT comprises:
  • 6. LEARN SUIT: CSS naming conventions COMPONENT
  • 7. LEARN SUIT: CSS naming conventions COMPONENT COMPONENT DESCENDENT DESCENDENT DESCENDENT DESCENDENT A component descendent is a class that is attached to a descendent node of a component. It's responsible for applying presentation directly to the descendent on behalf of a particular component.
  • 8. LEARN SUIT: CSS naming conventions COMPONENT COMPONENT DESCENDENT DESCENDENT DESCENDENT DESCENDENT COMPONENT+ MODIFIER DESCENDENT DESCENDENT DESCENDENT DESCENDENT A component modifier is a class that modifies the presentation of the base component in some form.
  • 9. LEARN SUIT: CSS naming conventions COMPONENT COMPONENT DESCENDENT DESCENDENT DESCENDENT DESCENDENT COMPONENT+ MODIFIER DESCENDENT DESCENDENT DESCENDENT DESCENDENT COMPONENT+ STATE DESCENDENT DESCENDENT DESCENDENT DESCENDENT Use is-stateName to reflect changes to a component's state. Never style these classes directly; they should always be used as an adjoining class.
  • 10. LEARN SUIT: CSS naming conventions COMPONENT COMPONENT DESCENDENT DESCENDENT DESCENDENT DESCENDENT COMPONENT+ MODIFIER DESCENDENT DESCENDENT DESCENDENT DESCENDENT COMPONENT DESCENDENT DESCENDENT DESCENDENT DESCENDENT + STATE Use is-stateName to reflect changes to a component's state. Never style these classes directly; they should always be used as an adjoining class.
  • 11. LEARN SUIT: CSS naming conventions +COMPONENTS UTILITIES SUIT Utility classes map to fixed, low-level, structural and positional traits. A BEM-based naming convention that helps to scope component CSS and make your widgets render more predictably. SUIT comprises:
  • 12. LEARN SUIT: CSS naming conventions Certain CSS properties and patterns are used frequently. For example: floats, containing floats, vertical alignment, text truncation. Utilities: • can help to reduce repetition and provide consistent implementations. • can be added to any element; multiple utilities can be used together; and utilities can be used alongside component classes. example.css <div class="Tweet u-cf"> <a class="u-sizeFit" href="{{url}}"> <img class="u-block" src="{{src}}" alt=""> </a> <p class="Tweet-text u-sizeFill u-textBreak"> … </p> </div> UTILITIES Utilities are grouped by type. The names of utilities with similar concerns usually start with a common string, e.g., u-textCenter, u-textTruncate; u- linkClean, u-linkBlock. SOURCE: SUIT CSS - Utilities.
  • 13. in a ROCKET QUICK EXAMPLE How it works with a real example
  • 14. LEARN SUIT: CSS naming conventions $150 SUBSCRIBE NOW
  • 15. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn
  • 16. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text
  • 17. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text COMPONENT + MODIFIER: important $150 SUBSCRIBE NOW
  • 18. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text COMPONENT + MODIFIER: important $150 SUBSCRIBE NOW $150 SUBSCRIBE NOW COMPONENT + STATE: is-active
  • 19. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text COMPONENT + MODIFIER: important $150 SUBSCRIBE NOW COMPONENT $150 SUBSCRIBE NOW DESCENDENT + STATE: is-active
  • 20. in a ROCKET LET'S CODE SUIT syntax you can start using right now
  • 21. SUIT SYNTAX LEARN SUIT: CSS naming conventions .ComponentName Must be written in pascal case. Examples: .MyBtn or .LoginForm COMPONENTS
  • 22. SUIT SYNTAX LEARN SUIT: CSS naming conventions .ComponentName Must be written in pascal case. Examples: .MyBtn or .LoginForm .ComponentName-descendentName Must be written in camel case. Examples: .MyBtn-priceBox or .MyBtn-textBox $150 SUBSCRIBE NOW COMPONENTS DESCENDENTS
  • 23. SUIT SYNTAX $150 SUBSCRIBE NOW LEARN SUIT: CSS naming conventions .ComponentName Must be written in pascal case. Examples: .MyBtn or .LoginForm .ComponentName-descendentName Must be written in camel case. Examples: .MyBtn-priceBox or .MyBtn-textBox $150 SUBSCRIBE NOW COMPONENTS DESCENDENTS MODIFIERS .ComponentName--modifierName Must be written in camel case. Examples: .MyBtn--important
  • 24. SUIT SYNTAX: HOW TO REMEMBER ITS RULES LEARN SUIT: CSS naming conventions I know it seems ridiculous, but mnemonics work with this things ;) PascaL firstCamel secondCamel
  • 25. SUIT SYNTAX: HOW TO REMEMBER ITS RULES LEARN SUIT: CSS naming conventions I know it seems ridiculous, but mnemonics work with this things ;) PascaL ComponentName Must be written in pascal case.
  • 26. SUIT SYNTAX: HOW TO REMEMBER ITS RULES LEARN SUIT: CSS naming conventions I know it seems ridiculous, but mnemonics work with this things ;) PascaL firstCamel ComponentName -descendentName Must be written in camel case.Must be written in pascal case.
  • 27. SUIT SYNTAX: HOW TO REMEMBER ITS RULES LEARN SUIT: CSS naming conventions I know it seems ridiculous, but mnemonics work with this things ;) PascaL firstCamel secondCamel ComponentName -descendentName --modifierName Must be written in camel case. Must be written in camel case.Must be written in pascal case.
  • 28. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn styles.css /* Component */ .MyBtn { styles here } CSS index.html <a href="#" class="MyBtn"></a> HTML
  • 29. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text styles.css /* Component */ .MyBtn { styles here } /* Descendents: depend upon the component */ .MyBtn-price { styles here } .MyBtn-text { styles here } CSS index.html <a href="#" class="MyBtn"> <span class="MyBtn-price">$150</span> <span class="MyBtn-text">Subscribe now</span> </a> HTML
  • 30. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn $150 SUBSCRIBE NOW styles.css /* Component */ .MyBtn { styles here } /* Descendents: depend upon the component */ .MyBtn-price { styles here } .MyBtn-text { styles here } /* Modifier: change style of the component */ .MyBtn--important { styles here } CSS index.html <a href="#" class="MyBtn MyBtn--important"> <span class="MyBtn-price">$150</span> <span class="MyBtn-text">Subscribe now</span> </a> HTML
  • 31. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn $150 SUBSCRIBE NOW styles.css /* Component */ .MyBtn { styles here } /* Descendents: depend upon the component */ .MyBtn-price { styles here } .MyBtn-text { styles here } /* Modifier: change style of the component */ .MyBtn-text--important { styles here } CSS index.html <a href="subscribe.html" class="MyBtn"> <span class="MyBtn-price">$150</span> <span class="MyBtn-text MyBtn-text--important">Subscribe now</span> </a> HTML
  • 32. USEFUL REFERENCES LEARN SUIT: CSS naming conventions SUIT CSS: NAMING CONVENTIONS SUIT CSS relies on structured class names and meaningful hyphens. github.com/suitcss/suit/blob/master/doc/naming-conventions.md SUIT CSS: STYLE TOOLS FOR UI COMPONENTS SUIT CSS is a reliable and testable styling methodology for component-based UI development. suitcss.github.io
  • 33. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
  • 34. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  • 35. inarocket.com Learn at rocket speed SUITCSS NAMING CONVENTION