bem css presentation, detroit craftsman guild
TRANSCRIPT
![Page 1: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/1.jpg)
09-15-2015
OOCSS & BEM
![Page 2: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/2.jpg)
Hello!
Brian Ritter
Co-Founder / Lead Developer
![Page 3: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/3.jpg)
Do you write HTML / CSS?
![Page 4: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/4.jpg)
Are you using a CSS code style guide or Methodology?
![Page 5: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/5.jpg)
Are you using a Methodology or styleguide?
You should be! Your CSS should be:
● Readable● Organized● Understandable● Maintainable
![Page 6: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/6.jpg)
CSS Methodologies
![Page 7: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/7.jpg)
CSS Methodologies
OOCSS: Object Oriented CSS
.article {}
.article .text {}
.article .title {}
● reusable components● cascading styles
![Page 8: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/8.jpg)
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
![Page 9: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/9.jpg)
Block.Element.Modifier.
![Page 10: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/10.jpg)
Why we switched.
![Page 11: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/11.jpg)
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.
![Page 12: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/12.jpg)
BEM: Blocks
HTML
<div><div>Header</div><div>Article</div><div>Footer</div>
</div>
![Page 13: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/13.jpg)
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
![Page 14: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/14.jpg)
BEM: Elements
HTML
...<div class=”article”>
<div>title</div><div>byline</div><div>text</div>
</div>...
![Page 15: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/15.jpg)
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
![Page 16: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/16.jpg)
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
![Page 17: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/17.jpg)
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
![Page 18: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/18.jpg)
.block {}
.block__element {}
.block__element--modifier {}
![Page 19: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/19.jpg)
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; }
![Page 20: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/20.jpg)
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; }
![Page 21: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/21.jpg)
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 }
![Page 22: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/22.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
![Page 23: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/23.jpg)
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; }
![Page 24: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/24.jpg)
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;
}
![Page 25: BEM CSS Presentation, Detroit Craftsman Guild](https://reader034.vdocuments.mx/reader034/viewer/2022042618/58a5e6021a28abd14d8b6c87/html5/thumbnails/25.jpg)
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.