bem css presentation, detroit craftsman guild
TRANSCRIPT
09-15-2015
OOCSS & BEM
Hello!
Brian Ritter
Co-Founder / Lead Developer
Do you write HTML / CSS?
Are you using a CSS code style guide or Methodology?
Are you using a Methodology or styleguide?
You should be! Your CSS should be:
● Readable● Organized● Understandable● Maintainable
CSS Methodologies
CSS Methodologies
OOCSS: Object Oriented CSS
.article {}
.article .text {}
.article .title {}
● reusable components● cascading styles
CSS Methodologies
OOCSS: Object Oriented CSS
BEM: Block, Element, Modifier
.article {} // block
.article__text {} // element
.article__title {} // element
.article__title--large {} // modifier
● reusable components● not cascading● all .classes
Block.Element.Modifier.
Why we switched.
Why we switched.
Flat Stylesheets
No Namespace Overlap
Simple
Flat Stylesheets. Provides readability and reduced complexity.
No Namespace Overlap. Provides reduced complexity and unique class names.
Simple. Simple syntax, simple rules, simple to maintain.
BEM: Blocks
HTML
<div><div>Header</div><div>Article</div><div>Footer</div>
</div>
BEM: Blocks
HTML
Blocks Added
<div><div class=”header”>Header</div><div class=”article”>Article</div><div class=”footer”>Footer</div>
</div>
.header {} // block
.article {} // block
.footer {} // block
BEM: Elements
HTML
...<div class=”article”>
<div>title</div><div>byline</div><div>text</div>
</div>...
BEM: Elements
HTML
Elements Added
...<div class=”article”>
<div class=”article__title>title</div><div class=”article__byline”>byline</div><div class=”article__text”>text</div>
</div>...
.article {} // block
.article__title {} // element
.article__byline {} // element
.article__text {} // element
BEM: Modifiers
HTML
<h1 class=”headline”>Headline 1</h1><p>text</p><h2 class=”headline”>Headline 2</h2><p>text</p><h3 class=”headline”>Headline 3</h3><p>text</p>
.headline {} // block
BEM: Modifiers
HTML
Modifiers Added
<h1 class=”headline headline--large”>Headline 1</h1><p>text</p><h2 class=”headline headline--medium”>Headline 2</h2><p>text</p><h3 class=”headline headline--small”>Headline 3</h3><p>text</p>
.headline {} // block
.headline--large {} // modifier
.headline--medium {} // modifier
.headline--small {} // modifier
Yes, you can use a modifier on a element..article {} // block.article__title {} // element.article__title--large {} // modifier
.block {}
.block__element {}
.block__element--modifier {}
Advanced Topics: Buttons
Example HTML / CSS
<a class=”btn>green</a><a class=”btn btn--red”>red</a><a class=”btn btn--red-active”>red active</a><a class=”btn btn--blue”>blue</a><a class=”btn btn--blue-active”>blue active<a>
.btn { background-color: green; }
.btn--red { background-color: red; }
.btn--red-active { background-color: white; color: red; }
.btn--blue { background-color: blue; }
.btn--blue-active { background-color: white; color: blue; }
Advanced Topics: Buttons
Example HTML / CSS
Bend the rules
<a class=”btn>green</a><a class=”btn btn--red”>red</a><a class=”btn btn--red btn--active”>red active</a><a class=”btn btn--blue”>blue</a><a class=”btn btn--blue btn--active”>blue active<a>
.btn { background-color: green; }
.btn--red { background-color: red; }
.btn--red.btn--active { background-color: white; color: red; }
.btn--blue { background-color: blue; }
.btn--blue.btn--active { background-color: white; color: blue; }
Advanced Topics: Modifiers
Example HTML / CSS
<div class=”header”><h1 class=”header__title header__title--christmas”>Title</h2><img class=”header__logo header__title--christmas” />
</div>
.header {} // block
.header__title { color: black; }
.header__title--christmas { color: green; }
.header__logo { background-image: logo.jpg }
.header__logo--christmas { background-image: christmas tree.jpg }
Advanced Topics: Modifiers
Example HTML / CSS
Bend the rules
<div class=”header header--christmas”><h1 class=”header__title”>Title</h2><img class=”header__logo” />
</div>
.header {} // block
.header__title { color: black; }
.header__logo { background-image: logo.jpg }
.header--christmas .header__title { color: green; }
.header--christmas .header__logo--christmas { background-image: christmas tree.jpg
}
1 Level Nesting, only nested under its own block
Don’t go overboard!
Bad
<button class=”btn btn--round btn--large btn--green”>go!</button><button class=”btn btn--square btn--small btn--red”>stop!</button>
.btn { padding: 10px; }
.btn--square { border-radius: 0; }
.btn--round { border-radius: 100%; }
.btn--small { font-size: 10px; }
.btn--large { font-size: 50px; }
.btn--green { background-color: green; }
.btn--red { background-color: red; }
Don’t go overboard!
Bad
Better
<button class=”btn btn--go”>go!</button><button class=”btn”>stop!</button>
.btn { padding: 10px; border-radius: 0; font-size: 10px; background-color: red;
}.btn--go {
border-radius: 100%; font-size: 50px;background-color: green;
}
Performance
Yeah, we kinda care about it.
From:
http://csswizardry.com/2011/09/writing-efficient-css-selectors/
Fastests -> Slowest
1. ID, e.g. #header
2. Class, e.g. .promo
3. Type, e.g. div
4. Adjacent sibling, e.g. h2 + p
5. Child, e.g. li > ul
6. Descendant, e.g. ul a
7. Universal, i.e. *
8. Attribute, e.g. [type="text"]
9. Pseudo-classes/-elements, e.g. a:hover
ID and Class have very little performance difference.
