OOCSS - Keep it small

Joomla!dagen Nederland 2014

 #jd14nl

Babs Gösgens
e @babsgosgens
www.crossinghippos.com
er @crossinghippos
Modular CSS
Joomla!dagen Nederland 2014
“CSS has become more interesting and more
complicated.”

–Hugo Giraudel (@HugoGiraudel )

h!p://www.sitepoint.com/architecture-sass-project/
WET
Be!er ?
Context
Be!er ?
Re-usability
Be!er ?
(Cross media) Semantics
Be!er ?
Persistent Grid
Be!er ?
 Facebook

• 6498 colour declarations

• 548 unique colours

• 261 shades of “Facebook” blue

• 3668 padding declarations

• 511 heading selectors

Source: thekmiecs.com
 Media Object
• 5 Lines of CSS

• A small HTML snippet

Media Object
Nicole Sullivan
OOCSS in 2009
(@stubbornella)

Source: Joshua Kulpa via Flickr CC

 OOCSS

• Separate structure and skin

• Separate container and content








Modular + DRY = Scalable
f f f
Small sites can grow big

Source: Harry Roberts (@csswizardry)

less CSS = faster site
 Object

• HTML

• CSS

• JavaScript

• …
 OOCSS Systemen

• OOCSS

• SMACCS

• BEM

• Atomic CSS

• …
 BEM
Block-Element-Modifier
 Block

• Independent Entity

• Blocks can contain other blocks


Bron: h!p://bem.info/method/definitions/
 Element

• Smallest part of a block

• Context-dependent

Bron: h!p://bem.info/method/definitions/
 Modifier

• Extra, or different property

• Multiple modifiers

Bron: h!p://bem.info/method/definitions/
 BEM Classes

.block { }

.block__element { }

.block--modifier { }
Person
Media Object in BEM
Not everything is BEM
“Good names don’t change.”

–W3C

h!p://www.w3.org/QA/Tips/goodclassnames
 Class names

• a warning, important, submenu

• b border4px, ligh!ext, pre!ybackground





h!p://www.w3.org/QA/Tips/goodclassnames
 Classisitis

• Repeating classes are excellent

candidates for compression




Source: h!p://www.staceyreid.com
 Good habits
• Use shallow selectors

• Separate skin and behavior

• Avoid repetition (DRY)

• Avoid context

• Avoid having to rewrite properties

• Comments, comments and comments

 Bad habits
• Overqualified selectors

• Overly specific selectors

• Universal selector .block

.menu#mainmenu
> .block__element
*

• ID’s for styling

• !important
 Specificity
• Universal selectors
bad!
• Tag (type) selectors

• Class selectors style=“color:

:first-child,
[type=“checkbox”]
a,
#mainmenu
div,
.block
*article
::before
#f00;”
• A!ribute selectors

• Pseudo-classes & Pseudo-elements

• ID selectors

• Inline styles
 Methods
• Structure

• Ordering

• Context

• Comments

• Semantics (for us)

 CSS Preprocessors
• Variables

• Functions

• Mixins & placeholders

• Inheritance

• Operators & directives

• Maps
 “One file to rule them all,
One file to find them,
One file to bring them all,
And in the Sass way merge them.”
– J.R.R. Tolkien (& Hugo Giraudel)
Partials

• Every component in its own file

• Individual files are pulled in 


to create a single stylesheet

• Much easier to maintain

Source: h!p://www.sitepoint.com/architecture-sass-project/
SASS & BEM
SASS & BEM
Abstraction exercise
Abstraction exercise
 Sources
• h!p://bem.info/
• h!p://bradfrostweb.com/blog/post/atomic-web-design/
• h!p://clubmate.fi/oocss-acss-bem-smacss-what-are-they-
what-should-i-use/
• h!p://coding.smashingmagazine.com/2011/12/12/an-
introduction-to-object-oriented-css-oocss/
• h!p://csswizardry.com/2011/09/writing-efficient-css-
selectors/
• h!p://csswizardry.com/2013/01/mindbemding-ge!ing-
your-head-round-bem-syntax/
• h!p://hugogiraudel.com/
• h!p://nicoespeon.com/en/2013/05/dive-into-oocss/
• h!p://nicolasgallagher.com/about-html-semantics-front-
end-architecture/
• h!p://rhodesmill.org/brandon/2011/concentric-css/
• h!p://sass-lang.com/
• h!p://smacss.com/
• h!p://snook.ca/
• h!p://www.alwaystwisted.com/post.php?s=2014-02-27-
even-easier-bem-ing-with-sass-33
• h!p://www.bre!jankord.com/2013/02/09/thoughts-on-
semantic-html-class-names-and-maintainability/
• h!p://www.mathayward.com/modular-css-with-sass-
and-bem/
• h!p://www.sitepoint.com/architecture-sass-project/
• h!p://www.sitepoint.com/css-sass-styleguide/
• h!p://www.slideshare.net/maxdesign/css-oocss-and-
smacss
• h!ps://github.com/necolas/idiomatic-css
• h!ps://github.com/stubbornella/oocss/wiki
 a

www.facebook.com/crossinghippos

h!p://www.slideshare.net/babsgosgens