http://inarocket.com Learn SUIT fundamentals as fast as possible. What is SUIT (Components, descendents, modifiers, states, and utilities), SUIT syntax, how it works with a real example, etc.

1. inarocket.com
Learn at rocket speed
SUITCSS NAMING CONVENTION

2. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com

3. in a
ROCKET
SUIT FUNDAMENTALS
Understanding SUIT in just 2 minutes

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