Joomla!dagen Nederland 2014

OOCSS - Keep it small

Babs Gösgense @babsgosgens

#jd14nl

www.crossinghippos.com er @crossinghippos

Joomla!dagen Nederland 2014

Modular CSS

–Hugo Giraudel (@HugoGiraudel )

“CSS has become more interesting and more complicated.”

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 SullivanOOCSS in 2009 (@stubbornella)

Source: Joshua Kulpa via Flickr CC

OOCSS

• Separate structure and skin

• Separate container and content

Modular

fDRY

fScalable

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

• …

BEMBlock-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

–W3C

“Good names don’t change.”

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

• ID’s for styling

• !important

.menu#mainmenu.block > .block__element*

Specificity• Universal selectors

• Tag (type) selectors

• Class selectors

• A!ribute selectors

• Pseudo-classes & Pseudo-elements

• ID selectors

• Inline styles

*a, div, article.block[type=“checkbox”]:first-child, ::before#mainmenustyle=“color: #f00;”

bad!

Methods

• Structure

• Ordering

• Context

• Comments

• Semantics (for us)

CSS Preprocessors• Variables

• Functions

• Mixins & placeholders

• Inheritance

• Operators & directives

• Maps

– J.R.R. Tolkien (& Hugo Giraudel)

“One file to rule them all, One file to find them,

One file to bring them all, And in the Sass way merge them.”

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