Upload
babs-goesgens
View
110
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Presentatie on OOCSS for the Joomla!dagen Nederland 2014. OOCSS borrows concepts from software architecture. By structuring your CSS and abstracting parts for re-use the resulting code is leaner, more scalable and much more maintainable. It introduces a few methods for modular CSS ands shows how you can use some of SASS's new features to implement BEM.
Citation preview
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 ?
• 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