This document discusses two approaches to organizing CSS stylesheets: OOCSS and SMACSS. OOCSS follows object-oriented principles like single responsibility and separation of concerns. SMACSS (Scalable and Modular Architecture for CSS) is a style guide that separates CSS into base, layout, module, and state categories. It also discusses module subcategories, theme styles, and tips for writing CSS code.

1. OOCSS and SMACSS
Rafael Ventura
1 / 24

2. HOW BROWSER RENDER
2 / 24

3. CLASSICAL PROBLEMS
Repetitions
Problems to maintain or scale
Deep in the CSSOM
Confuse
3 / 24

4. OOCSS
Object Oriented CSS
Single responsability
Separation of concerns
Separation of structure from skin
Use of classes before Ids
4 / 24

5. Advantages
Maintance
Concise
Reusable
Semantic
5 / 24

6. SMACSS
Created by Jonathan Snook
Scalable and Modular Architecture for CSS
Not a framework, more a style guide
6 / 24

7. BASE
Defines the default styles of each elements
Resets and normalizes belongs to here
Frameworks too
7 / 24

8. BASE - Example
8 / 24

9. LAYOUT
Big sections of the page
Define header, sidebar, footers, etc...
Can use IDs
Recomends starts with l-
9 / 24

10. LAYOUT - Example
10 / 24

11. MODULE
Components of site
Will be reusables without breaking the site
Can exist standalone
Can contain childs or descendents
11 / 24

12. MODULE - Example
12 / 24

13. Warning about using
element selectors
Element selectors should be only used when the
style applyed will be the same every time
13 / 24

14. MODULE - SUBMODULES
Use to fit the original model to a new generic
context
To battle against specificity
14 / 24

15. STATE
Override specific styles
Can be applyed in layouts or modules
State can indicate a Javascript dependency
Usualy starts with is
15 / 24

16. STATE - Example
16 / 24

17. WARNING
States can use !important
17 / 24

18. THEME
Are optional
Serve to specific needs, specially cosmetic
changes
18 / 24

19. TIPS - UTILS
Classes that work with box model to align
elements
Refine your design
19 / 24

20. TIPS - ORDER TO WRITE
Box
Border
Background
Text
Other
20 / 24

21. TIPS - BEM
BLOCK
ELEMENT
MODIFY
Example: list__item--star
21 / 24

22. DIDN'T LIKE SMACSS?
Atomic Design
Idiomatic CSS
CSS Guidelines
22 / 24

23. REFERENCES:
https://github.com/stubbornella/oocss/wiki
https://smacss.com/
http://www.smashingmagazine.com/2011/12/12/an-
introduction-to-object-oriented-css-oocss/
https://en.bem.info/
23 / 24

24. THANKS
24 / 24