Decoupling Your html, css, and java script
-
Upload
tomislav-mesic -
Category
Software
-
view
562 -
download
2
description
Transcript of Decoupling Your html, css, and java script
DECOUPLING Tomislav Mesić@tomislavmesicFIVEHTML-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 { }
DECOUPLINGOOCSS#SMACSSScalable and Modular Architecture for CSSBase, 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>#// It’s 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#
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
INSPIRED BYPhilip Walton @philwalton http://bit.ly/1pHHvty#
Jonathan Snook@snookca http://smacss.comhttp://bit.ly/1oCYqOz
RESOURCES
PARTEEY