SlideShare a Scribd company logo
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 (20)

PDF
CSS - OOCSS, SMACSS and more
Russ Weakley
 
PDF
신입 웹 개발자 포트폴리오 / 댓글 게시판
hyeonjae Cheon
 
PDF
Introduction to Web Design
Victor M. Ortiz
 
PDF
Nuxt.JS Introdruction
David Ličen
 
PPTX
React Hooks
Joao Marins
 
PPTX
jQuery PPT
Dominic Arrojado
 
PPTX
Reactjs
Mallikarjuna G D
 
PPTX
Bootstrap
AvinashChunduri2
 
PPTX
Elements of html powerpoint
Anastasia1993
 
PPTX
An Overview on Nuxt.js
Squash Apps Pvt Ltd
 
PDF
Lab#9 graphic and color
Yaowaluck Promdee
 
PPTX
Kubernetes #4 volume &amp; stateful set
Terry Cho
 
PPT
Php Presentation
Manish Bothra
 
PDF
Webpack DevTalk
Alessandro Bellini
 
PPTX
Flex box
Harish Karthick
 
PPT
Cascading Style Sheets (CSS) help
casestudyhelp
 
PPTX
Check Point Virtual Systems
Group of company MUK
 
PPT
React js
Jai Santhosh
 
PDF
스프링 시큐리티 구조 이해
beom kyun choi
 
CSS - OOCSS, SMACSS and more
Russ Weakley
 
신입 웹 개발자 포트폴리오 / 댓글 게시판
hyeonjae Cheon
 
Introduction to Web Design
Victor M. Ortiz
 
Nuxt.JS Introdruction
David Ličen
 
React Hooks
Joao Marins
 
jQuery PPT
Dominic Arrojado
 
Bootstrap
AvinashChunduri2
 
Elements of html powerpoint
Anastasia1993
 
An Overview on Nuxt.js
Squash Apps Pvt Ltd
 
Lab#9 graphic and color
Yaowaluck Promdee
 
Kubernetes #4 volume &amp; stateful set
Terry Cho
 
Php Presentation
Manish Bothra
 
Webpack DevTalk
Alessandro Bellini
 
Flex box
Harish Karthick
 
Cascading Style Sheets (CSS) help
casestudyhelp
 
Check Point Virtual Systems
Group of company MUK
 
React js
Jai Santhosh
 
스프링 시큐리티 구조 이해
beom kyun choi
 

Similar to Learn SUIT: CSS Naming Convention (20)

PDF
OOCSS, SMACSS or BEM, what is the question...
Michael Posso
 
PDF
OOCSS, SMACSS or BEM?
Michael Posso
 
PDF
Creative Web 02 - HTML & CSS Basics
Lukas Oppermann
 
PDF
Front-End Methodologies
Arash Manteghi
 
PPT
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
PPT
Css best practices style guide and tips
Chris Love
 
PDF
Sane CSS - A modern approach to CSS
Lee Cheneler
 
PPT
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
PDF
css-tutorial
tutorialsruby
 
PDF
css-tutorial
tutorialsruby
 
PDF
Web technology unit II
MURALI ERASA
 
PPT
css-presentation.ppt
prathur68
 
PDF
Css tutorial
Sohail Christoper
 
PDF
Css - Tutorial
adelaticleanu
 
ODP
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
 
PDF
Css tutorial by viveksingh698@gmail.com
vivek698
 
PDF
Css tutorial
Fakhrul Islam Talukder
 
PDF
Css tutorial
Edress Oryakhail
 
PDF
Css tutorial
Mohamed Idris
 
PDF
Css masterclass book
Phoenix
 
OOCSS, SMACSS or BEM, what is the question...
Michael Posso
 
OOCSS, SMACSS or BEM?
Michael Posso
 
Creative Web 02 - HTML & CSS Basics
Lukas Oppermann
 
Front-End Methodologies
Arash Manteghi
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 
Css best practices style guide and tips
Chris Love
 
Sane CSS - A modern approach to CSS
Lee Cheneler
 
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
css-tutorial
tutorialsruby
 
css-tutorial
tutorialsruby
 
Web technology unit II
MURALI ERASA
 
css-presentation.ppt
prathur68
 
Css tutorial
Sohail Christoper
 
Css - Tutorial
adelaticleanu
 
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
 
Css tutorial by viveksingh698@gmail.com
vivek698
 
Css tutorial
Fakhrul Islam Talukder
 
Css tutorial
Edress Oryakhail
 
Css tutorial
Mohamed Idris
 
Css masterclass book
Phoenix
 
Ad

More from In a Rocket (15)

PDF
3- Learn Flexbox & CSS Grid / Container & items
In a Rocket
 
PDF
2- Learn Flexbox & CSS Grid / Context
In a Rocket
 
PDF
1- Learn Flexbox & CSS Grid / Environment setup
In a Rocket
 
PDF
17- Learn CSS Fundamentals / Units
In a Rocket
 
PDF
16- Learn CSS Fundamentals / Background
In a Rocket
 
PDF
15- Learn CSS Fundamentals / Color
In a Rocket
 
PDF
14- Learn CSS Fundamentals / Inheritance
In a Rocket
 
PDF
13- Learn CSS Fundamentals / Specificity
In a Rocket
 
PDF
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
PDF
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
PDF
10- Learn CSS Fundamentals / Pseudo-elements
In a Rocket
 
PDF
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
 
PDF
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
PDF
2- Learn HTML Fundamentals / Text Formatting
In a Rocket
 
PDF
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocket
 
3- Learn Flexbox & CSS Grid / Container & items
In a Rocket
 
2- Learn Flexbox & CSS Grid / Context
In a Rocket
 
1- Learn Flexbox & CSS Grid / Environment setup
In a Rocket
 
17- Learn CSS Fundamentals / Units
In a Rocket
 
16- Learn CSS Fundamentals / Background
In a Rocket
 
15- Learn CSS Fundamentals / Color
In a Rocket
 
14- Learn CSS Fundamentals / Inheritance
In a Rocket
 
13- Learn CSS Fundamentals / Specificity
In a Rocket
 
12- Learn CSS Fundamentals / Mix & group
In a Rocket
 
11- Learn CSS Fundamentals / Combinators
In a Rocket
 
10- Learn CSS Fundamentals / Pseudo-elements
In a Rocket
 
9- Learn CSS Fundamentals / Pseudo-classes
In a Rocket
 
8- Learn CSS Fundamentals / Attribute selectors
In a Rocket
 
2- Learn HTML Fundamentals / Text Formatting
In a Rocket
 
1- Learn HTML Fundamentals / Start in 5 Minutes
In a Rocket
 
Ad

Recently uploaded (20)

PDF
Cleaning up your RPKI invalids, presented at PacNOG 35
APNIC
 
PDF
The Hidden Benefits of Outsourcing IT Hardware Procurement for Small Businesses
Carley Cramer
 
PPTX
Softuni - Psychology of entrepreneurship
Kalin Karakehayov
 
PDF
BRKAPP-1102 - Proactive Network and Application Monitoring.pdf
fcesargonca
 
PPTX
西班牙巴利阿里群岛大学电子版毕业证{UIBLetterUIB文凭证书}文凭复刻
Taqyea
 
PPTX
原版一样(LHU毕业证书)英国利物浦希望大学毕业证办理方法
Taqyea
 
PDF
Digital burnout toolkit for youth workers and teachers
asociatiastart123
 
PDF
Boardroom AI: The Next 10 Moves | Cerebraix Talent Tech
ssuser73bdb11
 
PPTX
美国电子毕业证帕克大学电子版成绩单UMCP学费发票办理学历认证
Taqyea
 
PDF
google promotion services in Delhi, India
Digital Web Future
 
PDF
Empowering Local Language Email with IDN & EAI – Powered by XgenPlus
XgenPlus Technologies
 
PPTX
Academic Debate: Creation vs Evolution.pptx
JOHNPATRICKMARTINEZ5
 
PDF
Strategic Plan New and Completed Templeted
alvi932317
 
PPTX
04 Output 1 Instruments & Tools (3).pptx
GEDYIONGebre
 
PPTX
PHIPA-Compliant Web Hosting in Toronto: What Healthcare Providers Must Know
steve198109
 
PDF
The Internet - By the numbers, presented at npNOG 11
APNIC
 
PPTX
Networking_Essentials_version_3.0_-_Module_3.pptx
ryan622010
 
PDF
Enhancing Parental Roles in Protecting Children from Online Sexual Exploitati...
ICT Frame Magazine Pvt. Ltd.
 
PDF
web application development company in bangalore.pdf
https://dkpractice.co.in/seo.html tech
 
PDF
AI security AI security AI security AI security
elite44
 
Cleaning up your RPKI invalids, presented at PacNOG 35
APNIC
 
The Hidden Benefits of Outsourcing IT Hardware Procurement for Small Businesses
Carley Cramer
 
Softuni - Psychology of entrepreneurship
Kalin Karakehayov
 
BRKAPP-1102 - Proactive Network and Application Monitoring.pdf
fcesargonca
 
西班牙巴利阿里群岛大学电子版毕业证{UIBLetterUIB文凭证书}文凭复刻
Taqyea
 
原版一样(LHU毕业证书)英国利物浦希望大学毕业证办理方法
Taqyea
 
Digital burnout toolkit for youth workers and teachers
asociatiastart123
 
Boardroom AI: The Next 10 Moves | Cerebraix Talent Tech
ssuser73bdb11
 
美国电子毕业证帕克大学电子版成绩单UMCP学费发票办理学历认证
Taqyea
 
google promotion services in Delhi, India
Digital Web Future
 
Empowering Local Language Email with IDN & EAI – Powered by XgenPlus
XgenPlus Technologies
 
Academic Debate: Creation vs Evolution.pptx
JOHNPATRICKMARTINEZ5
 
Strategic Plan New and Completed Templeted
alvi932317
 
04 Output 1 Instruments & Tools (3).pptx
GEDYIONGebre
 
PHIPA-Compliant Web Hosting in Toronto: What Healthcare Providers Must Know
steve198109
 
The Internet - By the numbers, presented at npNOG 11
APNIC
 
Networking_Essentials_version_3.0_-_Module_3.pptx
ryan622010
 
Enhancing Parental Roles in Protecting Children from Online Sexual Exploitati...
ICT Frame Magazine Pvt. Ltd.
 
web application development company in bangalore.pdf
https://dkpractice.co.in/seo.html tech
 
AI security AI security AI security AI security
elite44
 

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