Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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:...
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIES
SUIT
Within components there can be Modifiers, Descendants and Sta...
LEARN SUIT: CSS naming conventions
COMPONENT
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
A component descendent ...
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ MODIFIER
DES...
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ MODIFIER
DES...
LEARN SUIT: CSS naming conventions
COMPONENT COMPONENT
DESCENDENT
DESCENDENT
DESCENDENT
DESCENDENT
COMPONENT+ MODIFIER
DES...
LEARN SUIT: CSS naming conventions
+COMPONENTS UTILITIES
SUIT
Utility classes map to fixed, low-level, structural and posit...
LEARN SUIT: CSS naming conventions
Certain CSS properties and patterns are used frequently.
For example: floats, containing...
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
COMPON...
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPON...
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn COMPONENT
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
COMPON...
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 .LoginFo...
SUIT SYNTAX
LEARN SUIT: CSS naming conventions
.ComponentName
Must be written in pascal case.
Examples: .MyBtn or .LoginFo...
SUIT SYNTAX
$150 SUBSCRIBE NOW
LEARN SUIT: CSS naming conventions
.ComponentName
Must be written in pascal case.
Examples:...
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work w...
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work w...
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work w...
SUIT SYNTAX: HOW TO REMEMBER ITS RULES
LEARN SUIT: CSS naming conventions
I know it seems ridiculous, but mnemonics work w...
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
styles.css
/* Component */
.MyBtn { styles here }
CSS
index.html
<a hr...
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
DESCENDENT: price DESCENDENT: text
styles.css
/* Co...
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
styles.css
/* Component */
.MyBtn { styles here }
/...
LEARN SUIT: CSS naming conventions
COMPONENT: MyBtn
$150 SUBSCRIBE NOW
styles.css
/* Component */
.MyBtn { styles here }
/...
USEFUL REFERENCES
LEARN SUIT: CSS naming conventions
SUIT CSS: NAMING CONVENTIONS
SUIT CSS relies on structured class name...
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
Upcoming SlideShare
Loading in …5
×

Learn SUIT: CSS Naming Convention

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.

Learn SUIT: CSS Naming Convention

  1. 1. inarocket.com Learn at rocket speed SUITCSS NAMING CONVENTION
  2. 2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  3. 3. in a ROCKET SUIT FUNDAMENTALS Understanding SUIT in just 2 minutes
  4. 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. 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. 6. LEARN SUIT: CSS naming conventions COMPONENT
  7. 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. 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. 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. 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. 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. 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. 13. in a ROCKET QUICK EXAMPLE How it works with a real example
  14. 14. LEARN SUIT: CSS naming conventions $150 SUBSCRIBE NOW
  15. 15. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn
  16. 16. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text
  17. 17. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text COMPONENT + MODIFIER: important $150 SUBSCRIBE NOW
  18. 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. 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. 20. in a ROCKET LET'S CODE SUIT syntax you can start using right now
  21. 21. SUIT SYNTAX LEARN SUIT: CSS naming conventions .ComponentName Must be written in pascal case. Examples: .MyBtn or .LoginForm COMPONENTS
  22. 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. 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. 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. 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. 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. 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. 28. LEARN SUIT: CSS naming conventions COMPONENT: MyBtn styles.css /* Component */ .MyBtn { styles here } CSS index.html <a href="#" class="MyBtn"></a> HTML
  29. 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. 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. 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. 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. 33. Are you also interested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
  34. 34. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
  35. 35. inarocket.com Learn at rocket speed SUITCSS NAMING CONVENTION

×