Decoupling Your HTML, CSS & JavaScript

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 ZenGarden The Beauty of CSS Design the garden
• 4.
  /* CSS extremelycoupled to the HTML */ #sidebar section:first-child h3 + p { }
• 5.
  /* CSS knowstoo 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> # // It’s better without ghost classes $("[data-action]").action({…}); # $.fn.action = function() { switch($(this).data().action) { case "add-to-cart": … } }
• 13.
  DECOUPLING Favor explicitcomponent 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# Don’t 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 PhilipWalton @philwalton http://bit.ly/1pHHvty# Jonathan Snook @snookca http://smacss.com http://bit.ly/1oCYqOz RESOURCES
• 15.
  PARTEEY