In this presentation you will see why the conventions (OOCSS, SMACSS, DRY and BEM) are important for your business, how you can to improve the performance, maintainability and solving problems/issues quickly for produce better web sites. CSS are changing over time and today with several devices and responsive web design you need to have in your mind the best practices for create your CSS. Obviously that we need to use a preprocessor (LESS, SASS, Stylus) because with the preprocessor you can to use variables, mixins, nested rules, inheritance, operations, extended and much more that will ease your life. Naming Convention is very important in any language because clarifies intent.

1. 1/
CSS Coding Conventions
CSS Naming 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 is a Mess
CSS is easy? CSS is messy!

3. / 3
Make a CSS better
Make it simple, short and above all describe what you are seeing.

4. 4/
HOW TO: Clean and 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: Clean and 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: Clean and 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: Clean and 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: Clean and 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 Oriented CSS
by Nicole Sullivan

10. 10/
Why I should use OOCSS?
OOCSS force you to think the website as a whole…

11. 11/
Two main principles of OOCSS
• Separate Structure and Skin
• Separate Container and Content

12. 12/
Two main principles of 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 in categories
• Base
• Layout
• Module
• State
• Theme

15. 15/
Are divided in categories
• Base
• Layout
• Module
• State
• Theme

16. 16/
Are divided in categories
• Base
• Layout
• Module
• State
• Theme

17. 17/
Are divided in categories
• Base
• Layout
• Module
• State
• Theme

18. 18/
Are divided in categories
• Base
• Layout
• Module
• State
• Theme

19. 19/
Naming Convention
module-submodule--modifier
module--modifier
module-submodule
module-submodule--modifier

20. / 20
DRY CSS
Don't Repeat 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 in categories
• Block
• Element
• Modifier

25. 25/
Are divided in categories
• Block
• Element
• Modifier

26. 26/
Are divided in categories
• Block
• Element
• Modifier

27. 27/
Naming Convention
block__element--modifier
block--modifier
block__element
block__element--modifier

28. / 28
Organize CSS properties

29. 29/
Declaration order
• by Alphabetical
• by Group

30. 30/
Declaration order
• by Alphabetical
• by Group

31. / 31
Summary

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 stop refactoring your code,
otherwise you'll have to fix a lot of broken
windows sooner than you think.

34. 34/
Reference list: Books
Scalable and Modular Architecture for CSS
By Jonathan Snook
It’s available on: http://shop.smacss.com/

35. 35/
Reference list: Links
http://oocss.org/
http://stubbornella.org/
http://smacss.com/
http://snook.ca/
http://bem.info/
http://csslint.net/
http://suitcss.github.io/
https://github.com/styleguide/css
https://github.com/csswizardry/CSS-Guidelines
https://github.com/work-club/CSS-Coding-Standards
http://www.vanseodesign.com/css/dry-principles/

36. 36/
Homer Simpson
WOOHOO!!! I hope I haven't forgotten anything.

37. Thank You.