Learn SUIT: CSS Naming Convention
11 likes5,141 views
The document provides an overview of the Suit CSS naming convention, a BEM-based methodology aimed at organizing component CSS for predictable rendering. It covers the structure of components, modifiers, and utility classes, emphasizing the importance of proper syntax and naming conventions such as Pascal case for components and camel case for descendants. Additionally, examples and references are included to assist with applying these conventions in front-end development.
Learn SUIT: CSS Naming Convention
- 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