oocss, smacss or bem?
TRANSCRIPT
![Page 1: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/1.jpg)
OOCSS, SMACSS or BEM?@micposso
![Page 2: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/2.jpg)
Michael PossoFront-End developer @babbel NYC
Email Marketing
MeetUp Organizer
@micposso
![Page 3: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/3.jpg)
Tables base structure
Lots of #ID selectors
Separate Structure from Styles
Animated GIFs
No semantics
Adobe FLASH!!!!
Old School “Web Design”
![Page 4: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/4.jpg)
(DRY)Don’t repeat yourself
![Page 5: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/5.jpg)
(SEMANTICS)Semantics is the study of the meaning of
linguistic expressions
![Page 6: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/6.jpg)
(Object Oriented) A system to be modeled as a set of objects that can be
controlled and manipulated in a modular manner
< Inheritance, can be extended and reusable >
![Page 7: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/7.jpg)
(CSS Specificity)Every selector has its place in the specificity hierarchy
smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
![Page 8: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/8.jpg)
(Comment you code) Help your fellow coders
![Page 9: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/9.jpg)
Samples of CSS comment styles/* ====== media ====== */
/* _header styles */
/*
* — Section Heading —
*/
/**
* High level descriptions or summaries
*/
http://cssguidelin.es/#commenting
![Page 10: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/10.jpg)
Semantics in HTML5 and CSSHTML5 introduced a new elements that can improve semantics of
your code. With this semantic elements and semantic naming in your
CSS classes, they can complement each other.
<nav class=”primary”></nav><section class=”main”></section><aside class=”sidebar”></aside>
![Page 11: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/11.jpg)
How to apply semantics in a global teamGlobal teams deal with a variety of cultures and linguistics differences
that can make semantics hard to apply.
Guidelines document
Use Interfaces
Delegate a reviewer
![Page 12: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/12.jpg)
CSS Resets, which one you use?“The reset styles given here are intentionally very generic. I don’t
particularly recommend that you just use this in its unaltered state in
your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline”. Eric Meyer
Eric Myer’s Reset
HTML5 Doctor
Your own?
![Page 13: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/13.jpg)
(OOCSS)Object Oriented CSS
![Page 14: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/14.jpg)
OOCSS Nicolle Sullivan 2009
github.com/stubbornella/oocss/wiki
slideshare.net/stubbornella/object-oriented-css
![Page 15: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/15.jpg)
OOCSS PrinciplesSeparate Structure and Skin
LAYOUT VS STYLES
Separate Container from Content
CONTAINER is not affected by its CONTENT
![Page 16: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/16.jpg)
Object Oriented CSS Best PracticesClasses instead of IDs for styling
No multi-level descendant class specificity unless needed
Define your design in “Components”
Extend elements with targeted classes rather than parent classes
Mix and Match components
Organize your stylesheet into sections
Consider adding a table of contents
Camel case your class names - naming is oriented around the “object”
![Page 17: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/17.jpg)
Basic StructureReset
GRID
Text styles
-headings
-content
Content Styles
-top level styles
-component specific
![Page 18: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/18.jpg)
Identify Common Properties.button1 {border-radius, height, color, font style, line-height, padding}
.button2 {border-radius, height, color, font style, line-height, padding}
.button3 {border-radius, height, color, font style, line-height, padding}
<div class=”button1”>Buy Now</div>
<div class=”button2”>More Information</div>
<div class=”button3”>Go Back</div>
![Page 19: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/19.jpg)
OOCSS Way.button-skin {border-radius, height, padding}
.cta {color, background-color}
.attention {color, background-color}
.enable {color, background-color}
<div class=”button-skin cta”>Buy Now</div>
<div class=”button-skin attention”>More Information</div>
<div class=”button-skin enable”>Go Back</div>
![Page 20: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/20.jpg)
The Media Object Example<div class="media">
<a href="http://twitter.com/stubbornella" class="img">
<img src="img.jpg" alt="Stubbornella" />
</a>
<div class="bd">
<p>@Stubbornella</p>
</div>
</div>
https://github.com/stubbornella/oocss/wiki/Content
![Page 21: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/21.jpg)
The Media Object Example/* ====== media ====== */
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}
https://github.com/stubbornella/oocss/wiki/Content
![Page 22: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/22.jpg)
The Media Object Example (html + css)
![Page 23: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/23.jpg)
TradeoffsBloating of the HTML
More CSS rules
Have to update HTML to make changes
BenefitsMaintainable and organized*
Easy to implement, no tools necessary
DRY CSS
Good for big and small projects
![Page 24: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/24.jpg)
(SMACSS)Scalable Modular Architecture for CSS
![Page 25: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/25.jpg)
SMACSSDeveloped by Jonathan Snook
@snookca
https://snook.ca/
https://smacss.com/
![Page 26: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/26.jpg)
Categorizing CSS Rules1. Base
2. Layout
3. Module
4. State
5. Theme - Optional
![Page 27: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/27.jpg)
File Architecture with Plain CSSindex.css - This is what will be linked in the HTML head. It uses
@import to bring the rest of the files into the document
base.css - reset, IDs and Element selectors OK
layout.css
theme.css - optional
module.css - will import other files from the modules folder
Modules folder-media.css
-text-box.css
![Page 28: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/28.jpg)
Using Sassindex.scss
_base.scss
_layout.scss
_theme.scss - optional
_module.scss
_var.scss
_utils.scss
Modules folder-media.scss
-text-box.scss
![Page 29: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/29.jpg)
(Space Naming)Use space naming with SMACSS
![Page 30: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/30.jpg)
Space Naming for Classes
layout.css
.l-right {float: right;}
.l-left {float: left;}
.l-align-center {text-align: center;}
.l-align-left {text-align: left;}
.l-align-right {text-align: right;}
![Page 31: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/31.jpg)
Space Naming for Classes
modules/cards.css
.card {}
.card--label {}
.card--meta {}
.card--meta {}
.card--copy {}
![Page 32: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/32.jpg)
TradeoffsComplicated Structure
Requires precompiler *
Bloating HTML with classes
BenefitsMaintainable and organized*
Faster rendering by using OOCSS principles
DRY CSS
Great for big projects with cross-functional teams
![Page 33: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/33.jpg)
(BEM)Block - Element - Modifier
![Page 34: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/34.jpg)
BEMDeveloped by Yandex
en.bem.info
It provides a rather strict way to
arrange your CSS classes into
independent modules
![Page 35: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/35.jpg)
BEM best practicesEverything is a class
Avoid nesting of any kind
Keep CSS specificity very flat and low
Descriptive names for classes
Avoid element selectors
CSS classes in BEM are called entities
![Page 36: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/36.jpg)
(BEM)BEM goal is to help developers better understand the
relationship between the HTML and CSS in a given project
![Page 37: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/37.jpg)
BEM classes relationship.btn = BLOCK
.btn__price = ELEMENT Is the class that depends on .btn to work
.btn--orange= MODIFIER Extend the .btn class
A representation of a web page structure in terms of blocks, elements,
and modifiers
BEM tree
![Page 38: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/38.jpg)
Using BEM naming conventions
/* Block component */
.btn {}
/* Element that depends upon the block */
.btn__price {}
/* Modifier that changes the style of the block */
.btn--orange {} or .btn__price--orange
![Page 39: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/39.jpg)
HTML with BEM classes
<a class="btn btn--big btn--orange" href="http://google.com">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>
![Page 40: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/40.jpg)
How about JavaScript?If you are using ID to select DOM element withJavaScript, try to use a
semantic name that describes the behavior.
$("js_btn--fadein").click(function(){ $("#div1").fadeIn();});
jQuery
<button class=”btn__cta btn--orange” id=”js_btn--fadein”>BUY NOW $9.99</button>
HTML
![Page 41: OOCSS, SMACSS or BEM?](https://reader034.vdocuments.site/reader034/viewer/2022042500/5899e1361a28ab4a0b8b7d73/html5/thumbnails/41.jpg)
TradeoffsBloating HTML with classes
Ugly, Ugly, Ugly
Long *&^#$ class names
BenefitsMaintainable and organized*
Relationships are defined in the naming conventions
Great for big and small projects with cross-functional teams