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