• Like
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS, DRY and BEM
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS, DRY and BEM

  • 560 views
Published

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 …

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.

Published in Internet , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
560
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.