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.
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:
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.
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.