WTF: OOCSS like a boss !

Here is a piece of advice and good practices to help you improve your css skills and put easily in place a complete and reusable framework for your future projects. Leading you to to be the next king of object oriented CSS!

Transcript

1. OOCSS: LIKE A BOSS WTF - August 2013
2. OOCSS WHAT THE HELL IS THIS?
3. • Maintainable CSS • Concise CSS • Reusable CSS • Linked to two principles: • Separate structure and skin • Separate container and content
4. WHEN TO USE IT ? Always, provided you’ve got enough time!
5. WHAT’S A CSS OBJECT?
7. A visual pattern
8. A visual pattern Repetitive
9. A visual pattern Repetitive Could be abstracted in a HTML, CSS or JS snippet
10. A visual pattern Repetitive Reusable Could be abstracted in a HTML, CSS or JS snippet
11. Examples Button Notification
12. Before and after
13. SEPARATE STRUCTURE AND SKIN
15. SEPARATE CONTAINER AND CONTENT
17. OOCSS INHERITENCE
18. CSS objects inherit from other CSS objects
19. base special/mixins modifier
20. order is not important order is important
21. Inheritence types
22. Type 1
23. Type 2
24. State inheritence
25. State inheritence
26. DETECT OBJECTS
27. DETECT OBJECTS Rule #1: Ignore HTML Scan your wireframes Reusable? Unique behaviour? For each of them «What’s this thing?» Identified List all runtime states
28. DETECT OBJECTS
29. DETECT OBJECTS
30. DETECT OBJECTS base progress-bar special progress-upload states progress-initialising progress-pending progress-complete progress-done progress-error
31. VARIABLES NAMING
35. FILE STRUCTURE
37. TRAPS AND ANTI-PATTERNS
39. .css() is evil
40. .css() is evil Avoid IDs and elements
41. .css() is evil Avoid IDs and elements Always start by identification
42. .css() is evil Avoid IDs and elements Always start by identification Horizontal explosion
43. .css() is evil Avoid IDs and elements Always start by identification Vertical explosion Horizontal explosion
44. LOOK AT YOUR OUTPUT
45. STOP TALKING, LET’S DO IT !
46. TOOLS
47. CODEKIT
48. KOALA
49. THANK YOU ! Henrotte Simon - @henrottesimon