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.
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
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
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
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?
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
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