BEM CSS Presentation, Detroit Craftsman Guild

09-15-2015

OOCSS & BEM

Hello!

Brian Ritter

Co-Founder / Lead Developer

brian@ambrdetroit.com

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.

Thanks!

brian@ambrdetroit.comambrdetroit.comfacebook.com/AmbrDetroit/