Download as PDF, PPTX
Uploaded byRodrigo Castilho
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS, DRY and BEM
The document discusses CSS coding conventions and practices to improve the organization and maintainability of CSS code, emphasizing techniques like OOCSS, SMACSS, and BEM. Key recommendations include using descriptive names, minimizing selector depth, and ensuring separation of structure and presentation. The overall goal is to create predictable, reusable, and scalable CSS while continuously learning and refining one's coding skills.
More Related Content
Similar to Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS, DRY and BEM
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS, DRY and BEM
- 1. 1/ CSS Coding Conventions CSSNaming Conventions Improve your code with OOCSS, SMACSS, DRY and BEM Rodrigo Castilho aka RODCAST Senior Front End Engineer @rodcast 07/10/2014
- 2. / 2 CSS isa Mess CSS is easy? CSS is messy!
- 3. / 3 Make aCSS better Make it simple, short and above all describe what you are seeing.
- 4. 4/ HOW TO: Cleanand Organize your CSS! • Use a name that describes what you are styling • Indents and Space (all lowercase) • Avoid IDs selectors in CSS • Minimize the depth of CSS selectors • Use classes to define visual presentation patterns
- 5. 5/ HOW TO: Cleanand Organize your CSS! • Use a name that describes what you are styling • Indents and Space (all lowercase) • Avoid IDs selectors in CSS • Minimize the depth of CSS selectors • Use classes to define visual presentation patterns
- 6. 6/ HOW TO: Cleanand Organize your CSS! • Use a name that describes what you are styling • Indents and Space (all lowercase) • Avoid IDs selectors in CSS • Minimize the depth of CSS selectors • Use classes to define visual presentation patterns
- 7. 7/ HOW TO: Cleanand Organize your CSS! • Use a name that describes what you are styling • Indents and Space (all lowercase) • Avoid IDs selectors in CSS • Minimize the depth of CSS selectors • Use classes to define visual presentation patterns
- 8. 8/ HOW TO: Cleanand Organize your CSS! • Use a name that describes what you are styling • Indents and Space (all lowercase) • Avoid IDs selectors in CSS • Minimize the depth of CSS selectors • Use classes to define visual presentation patterns
- 9. / 9 OOCSS Object OrientedCSS by Nicole Sullivan
- 10. 10/ Why I shoulduse OOCSS? OOCSS force you to think the website as a whole…
- 11. 11/ Two main principlesof OOCSS • Separate Structure and Skin • Separate Container and Content
- 12. 12/ Two main principlesof OOCSS • Separate Structure and Skin • Separate Container and Content
- 13. / 13 SMACSS (pronounced“smacks”) Scalable and Modular Architecture for CSS by Jonathan Snook
- 14. 14/ Are divided incategories • Base • Layout • Module • State • Theme
- 15. 15/ Are divided incategories • Base • Layout • Module • State • Theme
- 16. 16/ Are divided incategories • Base • Layout • Module • State • Theme
- 17. 17/ Are divided incategories • Base • Layout • Module • State • Theme
- 18. 18/ Are divided incategories • Base • Layout • Module • State • Theme
- 19.
- 20. / 20 DRY CSS Don'tRepeat Yourself by Jeremy Clarke
- 21. 21/ Two important things • Less Code • Decouple your CSS
- 22. 22/ Two important things • Less Code • Decouple your CSS
- 23. / 23 BEM Block, Element,Modifier by guys Yandex
- 24. 24/ Are divided incategories • Block • Element • Modifier
- 25. 25/ Are divided incategories • Block • Element • Modifier
- 26. 26/ Are divided incategories • Block • Element • Modifier
- 27.
- 28. / 28 Organize CSSproperties
- 29. 29/ Declaration order • byAlphabetical • by Group
- 30. 30/ Declaration order • byAlphabetical • by Group
- 31.
- 32. 32/ The goals Predictable, Reusable,Maintainable and Scalable. Use best practices, make a simple and logic CSS with all experience and continue learning and when possible refactor your code. The more you learn the better you are, but there is always more learning to be done and have in your mind, you can to change every time with maintenance. In other scenario, have a standard independent of your choice. The less time you spend with your CSS, more time you have to improve your knowledge and your code.
- 33. 33/ Don’t forget Never stoprefactoring your code, otherwise you'll have to fix a lot of broken windows sooner than you think.
- 34. 34/ Reference list: Books Scalableand Modular Architecture for CSS By Jonathan Snook It’s available on: http://shop.smacss.com/
- 35.
- 36. 36/ Homer Simpson WOOHOO!!! Ihope I haven't forgotten anything.
- 37.