Successfully reported this slideshow.
Your SlideShare is downloading. ×

Learn SUIT: CSS Naming Convention

Learn SUIT: CSS Naming Convention

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×