OOCSS - Keep it small
Joomla!dagen Nederland 2014
#jd14nl
Babs Gösgens
e @babsgosgens
[Link]
er @crossinghippos
Modular CSS
Joomla!dagen Nederland 2014
“CSS has become more interesting and more
complicated.”
–Hugo Giraudel (@HugoGiraudel )
h!p://[Link]/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: [Link]
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://[Link]/method/definitions/
Element
• Smallest part of a block
• Context-dependent
Bron: h!p://[Link]/method/definitions/
Modifier
• Extra, or different property
• Multiple modifiers
Bron: h!p://[Link]/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://[Link]/QA/Tips/goodclassnames
Class names
• a warning, important, submenu
• b border4px, ligh!ext, pre!ybackground
h!p://[Link]/QA/Tips/goodclassnames
Classisitis
• Repeating classes are excellent
candidates for compression
Source: h!p://[Link]
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://[Link]/architecture-sass-project/
SASS & BEM
SASS & BEM
Abstraction exercise
Abstraction exercise
Sources
• h!p://[Link]/ • h!p://[Link]/
• h!p://[Link]/blog/post/atomic-web-design/ • h!p://[Link]/
• h!p://[Link]/oocss-acss-bem-smacss-what-are-they- • h!p://[Link]/[Link]?s=2014-02-27-
what-should-i-use/ even-easier-bem-ing-with-sass-33
• h!p://[Link]/2011/12/12/an- • h!p://[Link]![Link]/2013/02/09/thoughts-on-
introduction-to-object-oriented-css-oocss/ semantic-html-class-names-and-maintainability/
• h!p://[Link]/2011/09/writing-efficient-css- • h!p://[Link]/modular-css-with-sass-
selectors/ and-bem/
• h!p://[Link]/2013/01/mindbemding-ge!ing- • h!p://[Link]/architecture-sass-project/
your-head-round-bem-syntax/ • h!p://[Link]/css-sass-styleguide/
• h!p://[Link]/ • h!p://[Link]/maxdesign/css-oocss-and-
• h!p://[Link]/en/2013/05/dive-into-oocss/ smacss
• h!p://[Link]/about-html-semantics-front- • h!ps://[Link]/necolas/idiomatic-css
end-architecture/ • h!ps://[Link]/stubbornella/oocss/wiki
• h!p://[Link]/brandon/2011/concentric-css/
• h!p://[Link]/
a
[Link]/crossinghippos
h!p://[Link]/babsgosgens
