OOCSS, SMACSS or BEM, what is the question...
Post on 07-Apr-2017
147 Views
Preview:
Transcript
OOCSS, SMACSS or BEM?@micposso
Michael PossoFront-End developer @babbel NYCEmail MarketingMeetUp Organizer
@micposso
Tables base structureLots of #ID selectorsSeparate Structure from StylesAnimated GIFsNo semanticsAdobe FLASH!!!!
Old School “Web Design”
(DRY)Don’t repeat yourself
(SEMANTICS)Semantics is the study of the meaning of
linguistic expressions
(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 >
(CSS Specificity)Every selector has its place in the specificity hierarchy
smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
(Comment you code) Help your fellow coders
Samples of CSS comment styles/* ====== media ====== */
/* _header styles */
/*
* — Section Heading —
*/
/**
* High level descriptions or summaries
*/
http://cssguidelin.es/#commenting
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>
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 documentUse Interfaces Delegate a reviewer
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 ResetHTML5 DoctorYour own?
(OOCSS)Object Oriented CSS
OOCSS Nicolle Sullivan 2009github.com/stubbornella/oocss/wikislideshare.net/stubbornella/object-oriented-css
OOCSS PrinciplesSeparate Structure and SkinLAYOUT VS STYLESSeparate Container from ContentCONTAINER is not affected by its CONTENT
Object Oriented CSS Best PracticesClasses instead of IDs for stylingNo multi-level descendant class specificity unless neededDefine your design in “Components”Extend elements with targeted classes rather than parent classesMix and Match componentsOrganize your stylesheet into sectionsConsider adding a table of contentsCamel case your class names - naming is oriented around the “object”
Basic StructureResetGRIDText styles
-headings-content
Content Styles-top level styles-component specific
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>
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>
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
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
The Media Object Example (html + css)
TradeoffsBloating of the HTMLMore CSS rulesHave to update HTML to make changes
BenefitsMaintainable and organized*Easy to implement, no tools necessaryDRY CSSGood for big and small projects
(SMACSS)Scalable Modular Architecture for CSS
SMACSSDeveloped by Jonathan Snook@snookcahttps://snook.ca/https://smacss.com/
Categorizing CSS Rules1. Base
2. Layout
3. Module
4. State
5. Theme - Optional
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 OKlayout.csstheme.css - optionalmodule.css - will import other files from the modules folderModules folder
-media.css-text-box.css
Using Sassindex.scss_base.scss_layout.scss_theme.scss - optional_module.scss_var.scss_utils.scssModules folder
-media.scss-text-box.scss
(Space Naming)Use space naming with SMACSS
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;}
Space Naming for Classes
modules/cards.css
.card {}
.card--label {}
.card--meta {}
.card--meta {}
.card--copy {}
TradeoffsComplicated StructureRequires precompiler *Bloating HTML with classes
BenefitsMaintainable and organized*Faster rendering by using OOCSS principlesDRY CSSGreat for big projects with cross-functional teams
(BEM)Block - Element - Modifier
BEMDeveloped by Yandexen.bem.info
It provides a rather strict way to arrange your CSS classes into independent modules
BEM best practicesEverything is a classAvoid nesting of any kindKeep CSS specificity very flat and lowDescriptive names for classesAvoid element selectors
CSS classes in BEM are called entities
(BEM)BEM goal is to help developers better understand the
relationship between the HTML and CSS in a given project
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
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
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>
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
TradeoffsBloating HTML with classesUgly, Ugly, UglyLong *&^#$ class names
BenefitsMaintainable and organized*Relationships are defined in the naming conventionsGreat for big and small projects with cross-functional teams
top related