Download as PDF, PPTX
Uploaded byIn a Rocket
Learn SUIT: CSS Naming Convention
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.
In this document
Powered by AI
Introduction to the presentation focused on SUITCSS, a naming convention for CSS in web development.
Basics of SUIT and its BEM-based approach, designed for better CSS scoping and predictability.
Explanation of components, modifiers, descendants, and states in SUIT, emphasizing class structure for effective styling.
Introduction to utility classes in SUIT, their purpose, and how to implement them to avoid repetition.
Quick example illustration of SUIT's utility classes in action, enticing viewers to subscribe for more learning.
Visual examples of the 'MyBtn' component structure including its descendants, modifiers, and states in SUIT.
Guide on how to use SUIT syntax for components, descendants, and modifiers including mnemonics for rules.
Application of SUIT conventions in practical HTML and CSS code snippets with detailed explanations.
References to additional resources for SUIT CSS and other web development topics like Bootstrap and PostCSS.
Final slide reiterating the focus on learning SUITCSS for efficient CSS management in development.
More Related Content
Similar to Learn SUIT: CSS Naming Convention
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Learn SUIT: CSS Naming Convention
- 1. inarocket.com Learn at rocketspeed SUITCSS NAMING CONVENTION
- 2. Learn front-end developmentat rocket speed inarocket.com by miguelsanchez.com
- 3. in a ROCKET SUIT FUNDAMENTALS UnderstandingSUIT in just 2 minutes
- 4. A BEM-based namingconvention 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: CSSnaming 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: CSSnaming conventions COMPONENT
- 7. LEARN SUIT: CSSnaming 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: CSSnaming 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: CSSnaming 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: CSSnaming 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: CSSnaming 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: CSSnaming 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 Howit works with a real example
- 14. LEARN SUIT: CSSnaming conventions $150 SUBSCRIBE NOW
- 15. LEARN SUIT: CSSnaming conventions COMPONENT: MyBtn
- 16. LEARN SUIT: CSSnaming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text
- 17. LEARN SUIT: CSSnaming conventions COMPONENT: MyBtn COMPONENT $150 SUBSCRIBE NOW DESCENDENT: price DESCENDENT: text COMPONENT + MODIFIER: important $150 SUBSCRIBE NOW
- 18. LEARN SUIT: CSSnaming 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: CSSnaming 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 SUITsyntax 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 SUBSCRIBENOW 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: HOWTO 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: HOWTO 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: HOWTO 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: HOWTO 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: CSSnaming conventions COMPONENT: MyBtn styles.css /* Component */ .MyBtn { styles here } CSS index.html <a href="#" class="MyBtn"></a> HTML
- 29. LEARN SUIT: CSSnaming 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: CSSnaming 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: CSSnaming 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 alsointerested in learning BOOTSTRAP 4 POSTCSS? + http://inarocket.teachable.com/courses/css-postcss Please visit:
- 34. Learn front-end developmentat rocket speed inarocket.com by miguelsanchez.com
- 35. inarocket.com Learn at rocketspeed SUITCSS NAMING CONVENTION