Intro to OOCSS Workshop
•
6 likes•1,625 views
Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code. Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Intro to OOCSS Workshop
Similar to Intro to OOCSS Workshop (20)
Recently uploaded
Recently uploaded (20)
Intro to OOCSS Workshop
- 1. Introduction To OOCSS Julie Cameron @jewlofthelotus Slides http://bit.ly/oocss_wks Exercises http://bit.ly/oocss_ex Workshop Prep
- 3. About You What is your name? What is your 140 character bio? What is your favorite CSS prop/value?
- 5. #cascade { div.is { span.delicate { position: absolute !important; } } }
- 6. “It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.” Andy Hume - CSS for Grownups
- 7. TOP DOWN CSS = REPETITION & BLOAT
- 11. NONE OF THIS IS SCALABLE OR MAINTAINABLE. A hot mess is what it is…
- 13. WE’VE BEEN COUPLING OUR HTML & CSS
- 15. Object Oriented Cascading Stylesheets OOCSS https://github.com/stubbornella/oocss/wiki
- 16. A scalable, maintainable, semantic, and predictable approach to writing CSS.
- 17. OOCSS was created by Nicole Sullivan while working for Facebook. She created a reusable CSS module called the “media object” to save hundreds of lines of code. stubbornella.org
- 18. The Media Object “a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)” https://github.com/stubbornella/oocss/wiki
- 19. The Media Object “a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)” https://github.com/stubbornella/oocss/wiki AKA a Facebook status.
- 20. A Media Object Media to the left and some variable length content to the right. img.png
- 21. OBJECTS
- 22. Objects are the abstraction of repetition.
- 23. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ
- 24. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ 2. CSS that styles those nodes
- 25. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ 2. CSS that styles those nodes 3. JavaScript functionality tied to those nodes
- 27. Modules with Variations .btn .btn—primary .btn-small CSS .btn:hover
- 28. Modules with Variations .btn .btn.is—disabled .btn.is-active CSS JS .btn—primary .btn-small CSS .btn:hover
- 29. Module Components Object aka module / component / block .btn, .media
- 30. Module Components Object aka module / component / block .btn, .media Child Objects .media__img, .media__body Relationships
- 31. Module Components Object aka module / component / block .btn, .media Modifiers .btn—-primary, .media—-inline CSS Design Variations Child Objects .media__img, .media__body Relationships
- 32. Module Components Object aka module / component / block .btn, .media Modifiers .btn—-primary, .media—-inline CSS Design Variations States .btn.is-active, .media—-collapsed CSS / JS Design Adjustments Child Objects .media__img, .media__body Relationships
- 33. BEST PRACTICES
- 34. SINGLE RESPONSIBILITY Do one thing well and one thing only.
- 36. NAMING CONVENTIONS Just breathe. Everything is going to be okay.
- 37. PICK A SYSTEM BE CONSISTENT
- 39. Naming Patterns How do you identify children? States? Modifiers? .objectChild .object-child .object_child .object_ _child .myObject—childObj .object.is—active .objectModifier .object-modifier .object_modifier .object——modifier .myObj-modClass .object.active
- 41. .block .media
- 43. .block .media .block__element .media_ _img .block——modifier .media——inline
- 44. .block .media .block__element .media_ _img .block——modifier .media——inline .block__element——modifier .media_ _img——right
- 46. Presentational Naming Describes how the object looks. .grid_ _col——9 .btn——small .border——all .color——red .float——left .border——thick
- 47. Semantic Naming Describes what the object is. .bookmark .article .callToAction .error .article_ _title .article——flagged
- 48. Fewer Semantic Classes DRY HTML VS DRY CSSMany Presentational Classes
- 49. NO ONE KNOWS WHAT THEY’RE DOING.
- 50. Questions?
- 54. Structure Vs. Skin Define repeating “invisible” patterns as reusable structures. What makes a button look like a button?
- 55. Structure Vs. Skin Define repeating “invisible” patterns as reusable structures. What makes a button look like a button? Define repeating visual patterns as reusable skins. What makes these buttons look different?
- 56. Structure Repeating “invisible” patterns. What makes a button look like a button?
- 57. Structure Repeating “invisible” patterns. What makes a button look like a button?
- 58. Skin Repeating visible patterns. What makes these buttons look different?
- 59. Skin Repeating visible patterns. What makes these buttons look different?
- 60. Structure + Skin
- 61. Structure + Skin .btn .btn—-primary .btn—-small .btn—-block .btn—-inverse
- 62. 1. Download and unzip package 2. Open entire folder in your text editor 3. Open index.html in browser Let’s Do This. http://bit.ly/oocss_ex
- 63. Structure, Skins, States, & Modifiers Button Exercise
- 64. Button Structure Exercise 1 Hints: use class .btn, make sure there are no hover or focus styles
- 65. Button Skins Exercise 2 Hints: use classes .btn—-primary, .btn—-secondary, .btn—-tertiary only three CSS properties need to be modified
- 66. Button States Exercise 3 Hint: style each variation for :hover only three CSS properties need to be adjusted for each variation
- 67. Button Modifiers Exercise 4 Hints: use classes .btn—-medium, .btn—-small, .btn—-block BONUS: .btn—-inverse
- 68. Questions?
- 69. Break Time
- 71. Container Vs. Content Objects should look the same no matter where you put them.
- 75. Better?
- 76. Separation Of Container & Content What is the container?
- 77. Separation Of Container & Content What is the container?
- 78. Separation Of Container & Content What is the content?
- 79. Separation Of Container & Content Abstract reusable styles into a new object.
- 80. With OOCSS, we’re encouraged to give more forethought to what is common among different elements, then separate those common features into modules, or objects, that can be reused anywhere. Louis Lazaris — Smashing Magazine
- 81. Open index.html in browser Let’s Do This.
- 82. Containers & Contents Sidebar ~> Object Exercise
- 83. Separate - Setup the same styles in the footer Exercise 1 Hints: Assume heading and paragraph styles are site defaults; lists are everything.
- 84. Modify - Create styles for the Right Sidebar Exercise 2 Hints: abstract float styles, add an alignment modifier We only need 3 new classes!
- 86. Questions?
- 87. OOCSS Structure vs. Skin Container vs. Content
- 88. CLASSITIS
- 89. HTML <3 CSS
- 91. The Semantics Debate • Do classes actually have “semantic” value?
- 92. The Semantics Debate • Do classes actually have “semantic” value? • To whom are classes semantic to?
- 93. The Semantics Debate • Do classes actually have “semantic” value? • To whom are classes semantic to? • Should we stick with one way or the other?
- 94. Presentational Arguments • Classes have NO meaning to the browser.
- 95. Presentational Arguments • Classes have NO meaning to the browser. • Classes ARE semantic to developers.
- 96. Presentational Arguments • Classes have NO meaning to the browser. • Classes ARE semantic to developers. • Content describes itself, classes don’t need to.
- 98. WHAT NOW?
- 99. Closing Don’ts • Avoid styling ID selectors • Avoid styling descendent selectors, ie. .sidebar ul li • Avoid attaching classes to element selectors, ie. h1.title • Avoid !important
- 100. Closing Do’s • Always look for UI patterns • Always be abstracting • Establish and be consistent with your naming system • Use a preprocessor like Sass for even more modularity and organization • Look into other modular systems like SMACSS or Atomic
- 101. Resources • https://github.com/stubbornella/oocss/wiki • http://www.smashingmagazine.com/2011/12/12/an- introduction-to-object-oriented-css-oocss/ • http://appendto.com/2014/04/oocss/ • http://nicolasgallagher.com/about-html-semantics- front-end-architecture/ • Decoupling the Frontend with Modular CSS @ SEM.js https://youtu.be/HoQ-QEusyS0
- 102. Questions? Slides http://bit.ly/oocss_wks Exercises http://bit.ly/oocss_ex Julie Cameron @jewlofthelotus