tech headline - css naming conventions: improve your code with oocss, smacss, dry and bem

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

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 lowercase)

•  Avoid IDs selectors in CSS

•  Minimize the depth of CSS selectors

•  Use classes to define visual presentation patterns

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 /

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 /

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 /

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

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 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 /

Don’t forget

Never stop refactoring your code,

otherwise you'll have to fix a lot of broken

windows sooner than you think.

34 /

Reference list: Books

Scalable and Modular Architecture for CSS By Jonathan Snook

It’s available on: http://shop.smacss.com/

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 /

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

Thank You.