際際滷

際際滷Share a Scribd company logo
DECOUPLING Tomislav Mesi 
@tomislavmesic 
FIVE 
HTML-CSS-JS
// HTML, CSS, JavaScript coupling 
$("#sidebar a").on("click", function(){ 
$(this) 
.parent("li") 
.addClass("menu-item-highlight"); 
});
DECOUPLING CSS Zen Garden 
The Beauty of CSS Design 
the garden
/* CSS extremely coupled to the HTML */ 
#sidebar section:first-child h3 + p { }
/* CSS knows too much about your HTML */ 
#sidebar ul > li > ul { } 
# 
/* Good */ 
.submenu { }
DECOUPLING 
OOCSS# 
SMACSS 
Scalable and Modular Architecture for CSS 
Base, Layout, Module, State, Theme# 
Preprocessors 
HTML-CSS-JS
<!-- OOCSS madness --> 
<article class="article block block-md 
blue centered text-center text-white"></ 
article>
<!-- SMACSS principles --> 
<div class="pop-up is-visible"></div> 
# 
/* state .is-* classes */ 
.pop-up.is-visible {}
<button id="add-to-cart" class="add-item"> 
Add to cart 
</button> 
# 
// JavaScript That Knows Too Much About Structure 
$("#add-to-cart").addToCart({});
<button id="add-to-cart" class="add-item"> 
Add to cart 
</button> 
# 
// Classes With More Than One Responsibility 
$(".add-item").addToCart({});
<button class="js-add-to-cart add-item"> 
Add to cart 
</button> 
# 
// Behaviour classes js-* 
$(".js-add-to-cart").addToCart({});
<button class="add-item" data-action="add-to-cart"> 
Add to cart 
</button> 
# 
// Its better without ghost classes 
$("[data-action]").action({}); 
# 
$.fn.action = function() { 
switch($(this).data().action) { 
case "add-to-cart":  
} 
}
DECOUPLING 
Favor explicit component over complex 
CSS selectors in CSS# 
Style components based on what they 
are, not where they are# 
Favor data attributes or behavior 
classes in Javascript# 
Dont use the same class for both style 
and behavior# 
Differentiate state styles from default 
styles# 
Chain state class to the component 
class 
RECAP
INSPIRED BY 
Philip Walton 
@philwalton 
http://bit.ly/1pHHvty# 
Jonathan Snook 
@snookca 
http://smacss.com 
http://bit.ly/1oCYqOz 
RESOURCES
PARTEEY
Ad

Recommended

SuperMondays, July 2011
SuperMondays, July 2011
Peacock Carter Ltd
Create a landing page
Create a landing page
Fabien Vauchelles
Css Layout
Css Layout
Manimaran R
Gutenberg Blocks Development for Programmers with no time
Gutenberg Blocks Development for Programmers with no time
Mauricio Gelves
Responsive web design
Responsive web design
Sean Wolfe
How to content manage everything
How to content manage everything
Interconnect IT
Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
Introduction to Web Design, Week 1
Introduction to Web Design, Week 1
Lou Susi
Decouple Your Code For Reusability (International PHP Conference / IPC 2008)
Decouple Your Code For Reusability (International PHP Conference / IPC 2008)
Fabien Potencier
Web Services: Encapsulation, Reusability, and Simplicity
Web Services: Encapsulation, Reusability, and Simplicity
hannonhill
C4DM Seminar 2016-07-12: Brecht De Man
C4DM Seminar 2016-07-12: Brecht De Man
sebastianewert
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
Holger Bartel
Measuring maintainability; software metrics explained
Measuring maintainability; software metrics explained
Dennis de Greef
Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.
Junichi Ishida
Writing code that lasts or writing code you wont hate tomorrow.
Writing code that lasts or writing code you wont hate tomorrow.
Rafael Dohms
Protocol-Oriented MVVM
Protocol-Oriented MVVM
Natasha Murashev
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0
Mike Taylor
Testing at Spotify
Testing at Spotify
Andrii Dzynia
Data made out of functions
Data made out of functions
kenbot
Sass Code Reviews - How one code review changed my life #SassConf2015
Sass Code Reviews - How one code review changed my life #SassConf2015
Stacy Kvernmo
Introduction to Go programming
Introduction to Go programming
Exotel
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
Rachel Andrew
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
Top Time Tracking Solutions for Accountants
Top Time Tracking Solutions for Accountants
oliviareed320
Sysinfo OST to PST Converter Infographic
Sysinfo OST to PST Converter Infographic
SysInfo Tools
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo

More Related Content

Viewers also liked (15)

Decouple Your Code For Reusability (International PHP Conference / IPC 2008)
Decouple Your Code For Reusability (International PHP Conference / IPC 2008)
Fabien Potencier
Web Services: Encapsulation, Reusability, and Simplicity
Web Services: Encapsulation, Reusability, and Simplicity
hannonhill
C4DM Seminar 2016-07-12: Brecht De Man
C4DM Seminar 2016-07-12: Brecht De Man
sebastianewert
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
Holger Bartel
Measuring maintainability; software metrics explained
Measuring maintainability; software metrics explained
Dennis de Greef
Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.
Junichi Ishida
Writing code that lasts or writing code you wont hate tomorrow.
Writing code that lasts or writing code you wont hate tomorrow.
Rafael Dohms
Protocol-Oriented MVVM
Protocol-Oriented MVVM
Natasha Murashev
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0
Mike Taylor
Testing at Spotify
Testing at Spotify
Andrii Dzynia
Data made out of functions
Data made out of functions
kenbot
Sass Code Reviews - How one code review changed my life #SassConf2015
Sass Code Reviews - How one code review changed my life #SassConf2015
Stacy Kvernmo
Introduction to Go programming
Introduction to Go programming
Exotel
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
Rachel Andrew
Decouple Your Code For Reusability (International PHP Conference / IPC 2008)
Decouple Your Code For Reusability (International PHP Conference / IPC 2008)
Fabien Potencier
Web Services: Encapsulation, Reusability, and Simplicity
Web Services: Encapsulation, Reusability, and Simplicity
hannonhill
C4DM Seminar 2016-07-12: Brecht De Man
C4DM Seminar 2016-07-12: Brecht De Man
sebastianewert
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
Holger Bartel
Measuring maintainability; software metrics explained
Measuring maintainability; software metrics explained
Dennis de Greef
Great Tools Heavily Used In Japan, You Don't Know.
Great Tools Heavily Used In Japan, You Don't Know.
Junichi Ishida
Writing code that lasts or writing code you wont hate tomorrow.
Writing code that lasts or writing code you wont hate tomorrow.
Rafael Dohms
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0
Mike Taylor
Testing at Spotify
Testing at Spotify
Andrii Dzynia
Data made out of functions
Data made out of functions
kenbot
Sass Code Reviews - How one code review changed my life #SassConf2015
Sass Code Reviews - How one code review changed my life #SassConf2015
Stacy Kvernmo
Introduction to Go programming
Introduction to Go programming
Exotel
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
Rachel Andrew

Recently uploaded (20)

Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
Top Time Tracking Solutions for Accountants
Top Time Tracking Solutions for Accountants
oliviareed320
Sysinfo OST to PST Converter Infographic
Sysinfo OST to PST Converter Infographic
SysInfo Tools
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
Best MLM Compensation Plans for Network Marketing Success in 2025
Best MLM Compensation Plans for Network Marketing Success in 2025
LETSCMS Pvt. Ltd.
declaration of Variables and constants.pptx
declaration of Variables and constants.pptx
meemee7378
How Automation in Claims Handling Streamlined Operations
How Automation in Claims Handling Streamlined Operations
Insurance Tech Services
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
From Data Preparation to Inference: How Alluxio Speeds Up AI
From Data Preparation to Inference: How Alluxio Speeds Up AI
Alluxio, Inc.
Decipher SEO Solutions for your startup needs.
Decipher SEO Solutions for your startup needs.
mathai2
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
WSO2
Canva Pro Crack Free Download 2025-FREE LATEST
Canva Pro Crack Free Download 2025-FREE LATEST
grete1122g
Introduction to Agile Frameworks for Product Managers.pdf
Introduction to Agile Frameworks for Product Managers.pdf
Ali Vahed
Test Case Design Techniques Practical Examples & Best Practices in Software...
Test Case Design Techniques Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
Humans vs AI Call Agents - Qcall.ai's Special Report
Humans vs AI Call Agents - Qcall.ai's Special Report
Udit Goenka
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
CodeCleaner: Mitigating Data Contamination for LLM Benchmarking
arabelatso
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
Threat Modeling a Batch Job Framework - Teri Radichel - AWS re:Inforce 2025
2nd Sight Lab
Automated Testing and Safety Analysis of Deep Neural Networks
Automated Testing and Safety Analysis of Deep Neural Networks
Lionel Briand
Top Time Tracking Solutions for Accountants
Top Time Tracking Solutions for Accountants
oliviareed320
Sysinfo OST to PST Converter Infographic
Sysinfo OST to PST Converter Infographic
SysInfo Tools
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
ERP Systems in the UAE: Driving Business Transformation with Smart Solutions
dheeodoo
Best MLM Compensation Plans for Network Marketing Success in 2025
Best MLM Compensation Plans for Network Marketing Success in 2025
LETSCMS Pvt. Ltd.
declaration of Variables and constants.pptx
declaration of Variables and constants.pptx
meemee7378
How Automation in Claims Handling Streamlined Operations
How Automation in Claims Handling Streamlined Operations
Insurance Tech Services
Azure AI Foundry: The AI app and agent factory
Azure AI Foundry: The AI app and agent factory
Maxim Salnikov
From Data Preparation to Inference: How Alluxio Speeds Up AI
From Data Preparation to Inference: How Alluxio Speeds Up AI
Alluxio, Inc.
Decipher SEO Solutions for your startup needs.
Decipher SEO Solutions for your startup needs.
mathai2
Building Geospatial Data Warehouse for GIS by GIS with FME
Building Geospatial Data Warehouse for GIS by GIS with FME
Safe Software
HYBRIDIZATION OF ALKANES AND ALKENES ...
HYBRIDIZATION OF ALKANES AND ALKENES ...
karishmaduhijod1
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
Modern Platform Engineering with Choreo - The AI-Native Internal Developer Pl...
WSO2
Canva Pro Crack Free Download 2025-FREE LATEST
Canva Pro Crack Free Download 2025-FREE LATEST
grete1122g
Introduction to Agile Frameworks for Product Managers.pdf
Introduction to Agile Frameworks for Product Managers.pdf
Ali Vahed
Test Case Design Techniques Practical Examples & Best Practices in Software...
Test Case Design Techniques Practical Examples & Best Practices in Software...
Muhammad Fahad Bashir
Humans vs AI Call Agents - Qcall.ai's Special Report
Humans vs AI Call Agents - Qcall.ai's Special Report
Udit Goenka
Ad

Decoupling Your HTML, CSS & JavaScript

  • 1. DECOUPLING Tomislav Mesi @tomislavmesic FIVE HTML-CSS-JS
  • 2. // HTML, CSS, JavaScript coupling $("#sidebar a").on("click", function(){ $(this) .parent("li") .addClass("menu-item-highlight"); });
  • 3. DECOUPLING CSS Zen Garden The Beauty of CSS Design the garden
  • 4. /* CSS extremely coupled to the HTML */ #sidebar section:first-child h3 + p { }
  • 5. /* CSS knows too much about your HTML */ #sidebar ul > li > ul { } # /* Good */ .submenu { }
  • 6. DECOUPLING OOCSS# SMACSS Scalable and Modular Architecture for CSS Base, Layout, Module, State, Theme# Preprocessors HTML-CSS-JS
  • 7. <!-- OOCSS madness --> <article class="article block block-md blue centered text-center text-white"></ article>
  • 8. <!-- SMACSS principles --> <div class="pop-up is-visible"></div> # /* state .is-* classes */ .pop-up.is-visible {}
  • 9. <button id="add-to-cart" class="add-item"> Add to cart </button> # // JavaScript That Knows Too Much About Structure $("#add-to-cart").addToCart({});
  • 10. <button id="add-to-cart" class="add-item"> Add to cart </button> # // Classes With More Than One Responsibility $(".add-item").addToCart({});
  • 11. <button class="js-add-to-cart add-item"> Add to cart </button> # // Behaviour classes js-* $(".js-add-to-cart").addToCart({});
  • 12. <button class="add-item" data-action="add-to-cart"> Add to cart </button> # // Its better without ghost classes $("[data-action]").action({}); # $.fn.action = function() { switch($(this).data().action) { case "add-to-cart": } }
  • 13. DECOUPLING Favor explicit component over complex CSS selectors in CSS# Style components based on what they are, not where they are# Favor data attributes or behavior classes in Javascript# Dont use the same class for both style and behavior# Differentiate state styles from default styles# Chain state class to the component class RECAP
  • 14. INSPIRED BY Philip Walton @philwalton http://bit.ly/1pHHvty# Jonathan Snook @snookca http://smacss.com http://bit.ly/1oCYqOz RESOURCES