SlideShare a Scribd company logo
OOCSS, SMACSS or BEM?
@micposso
Michael Posso
Front-End developer @babbel NYC
Email Marketing
MeetUp Organizer
@micposso
Tables base structure
Lots of #ID selectors
Separate Structure from Styles
Animated GIFs
No semantics
Adobe 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 CSS
HTML5 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 team
Global teams deal with a variety of cultures and linguistics
differences that can make semantics hard to apply.
Guidelines document
Use 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 Reset
HTML5 Doctor
Your own?
(OOCSS)
Object Oriented CSS
OOCSS
Nicolle Sullivan 2009
github.com/stubbornella/oocss/wiki
slideshare.net/stubbornella/object-oriented-css
OOCSS Principles
Separate Structure and Skin
LAYOUT VS STYLES
Separate Container from Content
CONTAINER is not affected by its CONTENT
Object Oriented CSS Best Practices
Classes 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”
Basic Structure
Reset
GRID
Text 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)
Tradeoffs
Bloating of the HTML
More CSS rules
Have to update HTML to make changes
Benefits
Maintainable and organized*
Easy to implement, no tools necessary
DRY CSS
Good for big and small projects
(SMACSS)
Scalable Modular Architecture for CSS
SMACSS
Developed by Jonathan Snook
@snookca
https://snook.ca/
https://smacss.com/
Categorizing CSS Rules
1. Base
2. Layout
3. Module
4. State
5. Theme - Optional
File Architecture with Plain CSS
index.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
Using Sass
index.scss
_base.scss
_layout.scss
_theme.scss - optional
_module.scss
_var.scss
_utils.scss
Modules 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 {}
Tradeoffs
Complicated Structure
Requires precompiler *
Bloating HTML with classes
Benefits
Maintainable and organized*
Faster rendering by using OOCSS principles
DRY CSS
Great for big projects with cross-functional teams
(BEM)
Block - Element - Modifier
BEM
Developed by Yandex
en.bem.info
It provides a rather strict way to
arrange your CSS classes into
independent modules
BEM best practices
Everything 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
(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
Tradeoffs
Bloating HTML with classes
Ugly, Ugly, Ugly
Long *&^#$ class names
Benefits
Maintainable and organized*
Relationships are defined in the naming conventions
Great for big and small projects with cross-functional teams

More Related Content

What's hot

Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8
Jim Birch
 
BEM it!
BEM it!BEM it!
BEM it!
Max Shirshin
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
St. Petersburg College
 
Html css
Html cssHtml css
Html css
mohamed ashraf
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
Amanda Case
 
Css3
Css3Css3
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
umesh patil
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Css 1. -_introduction_2010-11_
Css 1. -_introduction_2010-11_Css 1. -_introduction_2010-11_
Css 1. -_introduction_2010-11_
Jupiterstar Ko
 
Dhtml ppt (2)
Dhtml ppt (2)Dhtml ppt (2)
Css
CssCss
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
Lukas Oppermann
 
Html
HtmlHtml
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkel
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
Neil Perlin
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangalore
Infocampus Logics Pvt.Ltd.
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
stephy123123
 

What's hot (20)

Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8
 
BEM it!
BEM it!BEM it!
BEM it!
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Html css
Html cssHtml css
Html css
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
 
Css3
Css3Css3
Css3
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css 1. -_introduction_2010-11_
Css 1. -_introduction_2010-11_Css 1. -_introduction_2010-11_
Css 1. -_introduction_2010-11_
 
Dhtml ppt (2)
Dhtml ppt (2)Dhtml ppt (2)
Dhtml ppt (2)
 
Css
CssCss
Css
 
Creative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS BasicsCreative Web 02 - HTML & CSS Basics
Creative Web 02 - HTML & CSS Basics
 
Html
HtmlHtml
Html
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
The benefits of BEM CSS
The benefits of BEM CSSThe benefits of BEM CSS
The benefits of BEM CSS
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangalore
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Steph's Html5 and css presentation
Steph's Html5 and css presentationSteph's Html5 and css presentation
Steph's Html5 and css presentation
 

Similar to OOCSS, SMACSS or BEM, what is the question...

Css Systems
Css SystemsCss Systems
Css Systems
Stephen Burgess
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
John Need
 
Build a better UI component library with Styled System
Build a better UI component library with Styled SystemBuild a better UI component library with Styled System
Build a better UI component library with Styled System
Hsin-Hao Tang
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
William Myers
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
An Introduction to CSS
An Introduction to CSSAn Introduction to CSS
An Introduction to CSS
John Catterfeld
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
Zohar Arad
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
Doncho Minkov
 
CSS.pptx
CSS.pptxCSS.pptx
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding Standards
Saajan Maharjan
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
Future Insights
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass Up
Mina Markham
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
JohnpaulStem11
 
CSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slidesCSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slides
Aasma13
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
JohnSon872476
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
ssuser666f98
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
UsamaShakeel22
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
PramenathA
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for css
Mohamed Amin
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 

Similar to OOCSS, SMACSS or BEM, what is the question... (20)

Css Systems
Css SystemsCss Systems
Css Systems
 
Rock Solid CSS Architecture
Rock Solid CSS ArchitectureRock Solid CSS Architecture
Rock Solid CSS Architecture
 
Build a better UI component library with Styled System
Build a better UI component library with Styled SystemBuild a better UI component library with Styled System
Build a better UI component library with Styled System
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
 
An Introduction to CSS
An Introduction to CSSAn Introduction to CSS
An Introduction to CSS
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
HTML and CSS Coding Standards
HTML and CSS Coding StandardsHTML and CSS Coding Standards
HTML and CSS Coding Standards
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass Up
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
CSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slidesCSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slides
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
Architecture for css
Architecture for cssArchitecture for css
Architecture for css
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 

Recently uploaded

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
Intelisync
 

Recently uploaded (20)

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024A Comprehensive Guide to DeFi Development Services in 2024
A Comprehensive Guide to DeFi Development Services in 2024
 

OOCSS, SMACSS or BEM, what is the question...

  • 1. OOCSS, SMACSS or BEM? @micposso
  • 2. Michael Posso Front-End developer @babbel NYC Email Marketing MeetUp Organizer @micposso
  • 3. Tables base structure Lots of #ID selectors Separate Structure from Styles Animated GIFs No semantics Adobe FLASH!!!! Old School “Web Design”
  • 5. (SEMANTICS) Semantics is the study of the meaning of linguistic expressions
  • 6. (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 >
  • 7. (CSS Specificity) Every selector has its place in the specificity hierarchy smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
  • 8. (Comment you code) Help your fellow coders
  • 9. Samples of CSS comment styles /* ====== media ====== */ /* _header styles */ /* * — Section Heading — */ /** * High level descriptions or summaries */ http://cssguidelin.es/#commenting
  • 10. Semantics in HTML5 and CSS HTML5 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>
  • 11. How to apply semantics in a global team Global teams deal with a variety of cultures and linguistics differences that can make semantics hard to apply. Guidelines document Use Interfaces Delegate a reviewer
  • 12. 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?
  • 15. OOCSS Principles Separate Structure and Skin LAYOUT VS STYLES Separate Container from Content CONTAINER is not affected by its CONTENT
  • 16. Object Oriented CSS Best Practices Classes 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”
  • 17. Basic Structure Reset GRID Text styles -headings -content Content Styles -top level styles -component specific
  • 18. 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>
  • 19. 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>
  • 20. 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
  • 21. 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
  • 22. The Media Object Example (html + css)
  • 23. Tradeoffs Bloating of the HTML More CSS rules Have to update HTML to make changes Benefits Maintainable and organized* Easy to implement, no tools necessary DRY CSS Good for big and small projects
  • 25. SMACSS Developed by Jonathan Snook @snookca https://snook.ca/ https://smacss.com/
  • 26. Categorizing CSS Rules 1. Base 2. Layout 3. Module 4. State 5. Theme - Optional
  • 27. File Architecture with Plain CSS index.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
  • 28. Using Sass index.scss _base.scss _layout.scss _theme.scss - optional _module.scss _var.scss _utils.scss Modules folder -media.scss -text-box.scss
  • 29. (Space Naming) Use space naming with SMACSS
  • 30. 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;}
  • 31. Space Naming for Classes modules/cards.css .card {} .card--label {} .card--meta {} .card--meta {} .card--copy {}
  • 32. Tradeoffs Complicated Structure Requires precompiler * Bloating HTML with classes Benefits Maintainable and organized* Faster rendering by using OOCSS principles DRY CSS Great for big projects with cross-functional teams
  • 33. (BEM) Block - Element - Modifier
  • 34. BEM Developed by Yandex en.bem.info It provides a rather strict way to arrange your CSS classes into independent modules
  • 35. BEM best practices Everything 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
  • 36. (BEM) BEM goal is to help developers better understand the relationship between the HTML and CSS in a given project
  • 37. 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
  • 38. 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
  • 39. 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>
  • 40. 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
  • 41. Tradeoffs Bloating HTML with classes Ugly, Ugly, Ugly Long *&^#$ class names Benefits Maintainable and organized* Relationships are defined in the naming conventions Great for big and small projects with cross-functional teams