learn suit: css naming convention
TRANSCRIPT
inarocket.com
Learn at rocket speed
SUITCSS NAMING CONVENTION
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
in aROCKET
SUIT FUNDAMENTALSUnderstanding 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 aROCKET
QUICK EXAMPLEHow 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 aROCKET
LET'S CODESUIT syntax you can start using right now
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentNameMust be written in pascal case. Examples: .MyBtn or .LoginForm
COMPONENTS
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentNameMust be written in pascal case. Examples: .MyBtn or .LoginForm
.ComponentName-descendentNameMust 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
.ComponentNameMust be written in pascal case. Examples: .MyBtn or .LoginForm
.ComponentName-descendentNameMust be written in camel case. Examples: .MyBtn-priceBox or .MyBtn-textBox
$150 SUBSCRIBE NOW
COMPONENTS
DESCENDENTS
MODIFIERS
.ComponentName--modifierNameMust 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
ComponentNameMust 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 -descendentNameMust 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 --modifierNameMust be written in camel case. Must be written in camel case.Must be written in pascal case.
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtnstyles.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 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
inarocket.com
Learn at rocket speed
SUITCSS NAMING CONVENTION