1/
CSS Coding Conventions
CSS Naming Conventions
Improve your code with OOCSS, SMACSS, DRY and BEM
Rodrigo Castilho aka RO...
/ 2
CSS is a Mess
CSS is easy? CSS is messy!
/ 3
Make a CSS better
Make it simple, short and above all describe what you are seeing.
4/
HOW TO: Clean and Organize your CSS!
•  Use a name that describes what you are styling
•  Indents and Space (all lowerc...
5/
HOW TO: Clean and Organize your CSS!
•  Use a name that describes what you are styling
•  Indents and Space (all lowerc...
6/
HOW TO: Clean and Organize your CSS!
•  Use a name that describes what you are styling
•  Indents and Space (all lowerc...
7/
HOW TO: Clean and Organize your CSS!
•  Use a name that describes what you are styling
•  Indents and Space (all lowerc...
8/
HOW TO: Clean and Organize your CSS!
•  Use a name that describes what you are styling
•  Indents and Space (all lowerc...
/ 9
OOCSS
Object Oriented CSS
by Nicole Sullivan
10/
Why I should use OOCSS?
OOCSS force you to think the website as a whole…
11/
Two main principles of OOCSS
•  Separate Structure and Skin
•  Separate Container and Content
12/
Two main principles of OOCSS
•  Separate Structure and Skin
•  Separate Container and Content
/ 13
SMACSS (pronounced “smacks”)
Scalable and Modular Architecture for CSS
by Jonathan Snook
14/
Are divided in categories
•  Base
•  Layout
•  Module
•  State
•  Theme
15/
Are divided in categories
•  Base
•  Layout
•  Module
•  State
•  Theme
16/
Are divided in categories
•  Base
•  Layout
•  Module
•  State
•  Theme
17/
Are divided in categories
•  Base
•  Layout
•  Module
•  State
•  Theme
18/
Are divided in categories
•  Base
•  Layout
•  Module
•  State
•  Theme
19/
Naming Convention
module-submodule--modifier
module--modifier
module-submodule
module-submodule--modifier
/ 20
DRY CSS
Don't Repeat Yourself
by Jeremy Clarke
21/
Two important things
•  Less Code
•  Decouple your CSS
22/
Two important things
•  Less Code
•  Decouple your CSS
/ 23
BEM
Block, Element, Modifier
by guys Yandex
24/
Are divided in categories
•  Block
•  Element
•  Modifier
25/
Are divided in categories
•  Block
•  Element
•  Modifier
26/
Are divided in categories
•  Block
•  Element
•  Modifier
27/
Naming Convention
block__element--modifier
block--modifier
block__element
block__element--modifier
/ 28
Organize CSS properties
29/
Declaration order
•  by Alphabetical
•  by Group
30/
Declaration order
•  by Alphabetical
•  by Group
/ 31
Summary
32/
The goals
Predictable, Reusable, Maintainable and Scalable.
Use best practices, make a simple and logic CSS with all e...
33/
Don’t forget
Never stop refactoring your code,
otherwise you'll have to fix a lot of broken
windows sooner than you th...
34/
Reference list: Books
Scalable and Modular Architecture for CSS
By Jonathan Snook
It’s available on: http://shop.smacs...
35/
Reference list: Links
http://oocss.org/
http://stubbornella.org/
http://smacss.com/
http://snook.ca/
http://bem.info/
...
36/
Homer Simpson
WOOHOO!!! I hope I haven't forgotten anything.
Thank You.
Upcoming SlideShare
Loading in …5
×

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

1,055 views
937 views

Published on

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,055
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 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. / 2 CSS is a Mess CSS is easy? CSS is messy!
  3. 3. / 3 Make a CSS better Make it simple, short and above all describe what you are seeing.
  4. 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. 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. 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. 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. 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. / 9 OOCSS Object Oriented CSS by Nicole Sullivan
  10. 10. 10/ Why I should use OOCSS? OOCSS force you to think the website as a whole…
  11. 11. 11/ Two main principles of OOCSS •  Separate Structure and Skin •  Separate Container and Content
  12. 12. 12/ Two main principles of OOCSS •  Separate Structure and Skin •  Separate Container and Content
  13. 13. / 13 SMACSS (pronounced “smacks”) Scalable and Modular Architecture for CSS by Jonathan Snook
  14. 14. 14/ Are divided in categories •  Base •  Layout •  Module •  State •  Theme
  15. 15. 15/ Are divided in categories •  Base •  Layout •  Module •  State •  Theme
  16. 16. 16/ Are divided in categories •  Base •  Layout •  Module •  State •  Theme
  17. 17. 17/ Are divided in categories •  Base •  Layout •  Module •  State •  Theme
  18. 18. 18/ Are divided in categories •  Base •  Layout •  Module •  State •  Theme
  19. 19. 19/ Naming Convention module-submodule--modifier module--modifier module-submodule module-submodule--modifier
  20. 20. / 20 DRY CSS Don't Repeat Yourself by Jeremy Clarke
  21. 21. 21/ Two important things •  Less Code •  Decouple your CSS
  22. 22. 22/ Two important things •  Less Code •  Decouple your CSS
  23. 23. / 23 BEM Block, Element, Modifier by guys Yandex
  24. 24. 24/ Are divided in categories •  Block •  Element •  Modifier
  25. 25. 25/ Are divided in categories •  Block •  Element •  Modifier
  26. 26. 26/ Are divided in categories •  Block •  Element •  Modifier
  27. 27. 27/ Naming Convention block__element--modifier block--modifier block__element block__element--modifier
  28. 28. / 28 Organize CSS properties
  29. 29. 29/ Declaration order •  by Alphabetical •  by Group
  30. 30. 30/ Declaration order •  by Alphabetical •  by Group
  31. 31. / 31 Summary
  32. 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. 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. 34/ Reference list: Books Scalable and Modular Architecture for CSS By Jonathan Snook It’s available on: http://shop.smacss.com/
  35. 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. 36/ Homer Simpson WOOHOO!!! I hope I haven't forgotten anything.
  37. 37. Thank You.

×