Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular HTML, CSS, & JS Workshop

Shay Howe
March 03, 2014

Modular HTML, CSS, & JS Workshop

You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.

We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.

Shay Howe

March 03, 2014
Tweet

More Decks by Shay Howe

Other Decks in Design

Transcript

  1. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Shay Howe

    @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
  2. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Common Problems

    • Websites have difficulty scaling • Code bases become brittle • Files and code bases begin to swell
  3. Modular HTML, CSS, & JS @shayhowe & @darbyfrey What’s Wrong

    • Best practices aren’t exactly best practices • Standards need to evolve
  4. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad

    Practices • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
  5. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad

    Practices Avoiding classes article#main  aside  ul  li  {...} section:last-­‐child  div:nth-­‐child(7)  a  {...} Leveraging selectors a.btn  {...} #main  a.btn  {...} #main  div.feature  a.btn  {...}
  6. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad

    Practices Bad #contact  li:nth-­‐child(1)  input, #contact  li:nth-­‐child(2)  input  {    width:  50%; } #contact  li:nth-­‐child(3)  textarea  {    width:  75%; }
  7. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad

    Practices Good .col-­‐1  {    width:  50%; } .col-­‐2  {    width:  75%; }
  8. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Code Must

    Be… • Organized • Modular • Performant
  9. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Methodologies OOCSS

    • Object-Oriented CSS From Nicole Sullivan – oocss.org SMACSS • Scalable and Modular Architecture for CSS From Jonathan Snook – smacss.com
  10. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code

    • Do not duplicate code • Remove old code • Defer loading subsequent styles
  11. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code

    Bad .news  {    background:  #ccc;    color:  #666; } .social  {    background:  #ccc;    color:  #666; }
  12. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code

    Good .news, .social  {    background:  #ccc;    color:  #666; } Better .feat-­‐box  {    background:  #ccc;    color:  #666; }
  13. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes

    • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
  14. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes

    Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
  15. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes

    Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
  16. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Specificity? •

    Determines which styles are applied • Each selector has a specificity weight • High specificity beats low specificity • Low specificity is key
  17. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Measuring Specificity

    Formula IDs, Classes/Pseudo-classes/Attributes, Elements High Specificity (Bad) #primary  #main  div.gallery  figure.media  {...} IDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2 Low Specificity (Good) .gallery-­‐media  {...} IDs: 0, Classes: 1, Elements: 0 — Compiled: 0-1-0
  18. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity

    • Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors header#main  div.spotlight  strong  span
  19. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity

    Bad #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }
  20. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity

    Good .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }
  21. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure

    • Separate presentation (or theme) from layout • Create an object layer for layout • Create a skin layer for theme • Use a grid
  22. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure

    Bad .news  {    background:  #ccc;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
  23. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure

    Good .grid-­‐4  {    margin:  0  10px;    width:  400px; } .feat-­‐box  {    background:  #ccc;    color:  #666; } <div  class="grid-­‐4  feat-­‐box">...</div>
  24. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements

    • Stylize elements to be transparent • Keep visual properties apart from layout properties
  25. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements

    Bad .pagination  {    border-­‐radius:  5px;    border:  1px  solid  #eee;    margin:  0  10px;    width:  620px; } <ul  class="pagination">...</ul>
  26. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements

    Good .grid-­‐8  {    margin:  0  10px;    width:  620px; } .offset-­‐box  {    border-­‐radius:  5px;    border:  1px  solid  #eee; } <ul  class="grid-­‐8  offset-­‐box">...</ul>
  27. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Create Adaptable

    Layouts • Height and width should be flexible • Height should extend with content • Width should extend with a grid
  28. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Create Adaptable

    Layouts Bad #main  {    float:  left;    margin:  0  10px;    width:  620px; } #aside  {    float:  left;    margin:  0  10px;    width:  300px; }
  29. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Create Adaptable

    Layouts Good .grid-­‐4, .grid-­‐8  {    float:  left;    margin:  0  10px; } .grid-­‐4  {    width:  300px; } .grid-­‐8  {    width:  620px; }
  30. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content

    • Separate content from container • Stylize content regardless of container
  31. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content

    Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
  32. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content

    Good .alert  {    border-­‐radius:  10px;    padding:  10px  20px; } .alert-­‐error  {    background:  #f2dede;    color:  #b94a48; } <div  class="alert  alert-­‐error">...</div>
  33. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent

    Dependency • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
  34. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent

    Dependency Bad .feat-­‐box  {    background:  #ccc; } article  .feat-­‐box  {    background:  #fff; } <article>    <div  class="feat-­‐box">...</div> </article>
  35. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent

    Dependency Good .feat-­‐box  {    background:  #ccc; } .feat-­‐box-­‐alt  {    background:  #fff; } <article>    <div  class="feat-­‐box-­‐alt">...</div> </article>
  36. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics

    • Allow elements to adapt • Uses individual classes to extend modules
  37. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics

    Bad .feat-­‐box  h2  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2>...</h2> </div>
  38. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics

    Good .feat-­‐subhead  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2  class="feat-­‐subhead">...</h2> </div>
  39. Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice

    HTML & CSS http:/ /bit.ly/modular-html-css-js
  40. Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript fs.readdir(source,

     function(err,  files)  {    if  (err)  {        console.log('Error  finding  files:  '  +  err)    }  else  {        files.forEach(function(filename,  fileIndex)  {            console.log(filename)            gm(source  +  filename).size(function(err,  values)  {                if  (err)  {                    console.log('Error  identifying  file  size:  '  +  err)                }  else  {                    console.log(filename  +  '  :  '  +  values)                    aspect  =  (values.width  /  values.height)                    widths.forEach(function(width,  widthIndex)  {                        height  =  Math.round(width  /  aspect)                        console.log('resizing  '  +  filename  +  'to  '  +  height  +  'x'  +  height)                        this.resize(width,  height).write(destination  +  'w'  +  width  +  '_'  +  filename,                        function(err)  {                            if  (err)  console.log('Error  writing  file:  '  +  err)                        })                    }.bind(this))                }            })        })    } }) http://callbackhell.com
  41. Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript image

     =  new  Image('filename.jpg'); image.resize(400,  300);
  42. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract and

    Encapsulate functionality with Objects
  43. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions function

     multiply(one,  two){    return  one  *  two; }; function(one,  two){    return  one  *  two; };
  44. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Assigned

    to Variables var  multiply  =  function(one,  two){    return  one  *  two; }; multiply(3,4);  =>  12
  45. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Elements

    in an Array var  multiply  =  function(one,  two){    return  one  *  two; }; var  array  =  [1,  2,  3,  multiply]; array[3](3,4);  =>  12
  46. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Pass

    as Arguments to Functions (Callback Pattern) var  multiply  =  function(one,  two){    return  one  *  two; }; var  sumSquare  =  function(one,  two,  callback){    sum  =  one  +  two;    return  callback(sum,  sum); }; sumSquare(1,  2,  multiply);  =>  9
  47. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Properties

    of an Object var  person  =  {    name:  'Darby  Frey',    location:  'Chicago',    nameAndLoc:  function(name,  location){        return  name  +  '  -­‐  '  +  location;    } }; person.nameAndLoc(person.name,person.location);   =>  'Darby  Frey  -­‐  Chicago'
  48. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects are

    Containers for Properties and Functions
  49. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects Simple

    Object var  person  =  {    name:  'Darby  Frey',    location:  'Chicago',    twitter:  '@darbyfrey' }; person.name;  =>  'Darby  Frey' person.location;  =>  'Chicago' person.twitter;  =>  '@darbyfrey'
  50. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects Functions

    as Properties var  person  =  {    name:  'Darby  Frey',    location:  'Chicago',    twitter:  '@darbyfrey',    nameAndLoc:  function(){        return  this.name  +  '  -­‐  '  +  this.location;    } }; person.nameAndLoc();  =>'Darby  Frey  -­‐  Chicago'
  51. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions

    When a function is called with the new keyword it’s a constructor function Constructor Functions • Create a new instance of the object • Create their own context accessible by the this keyword
  52. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions

    var  Person  =  function(){} me  =  new  Person(); typeof  me;  =>  object me;  =>  Person  {} me.name;  =>  undefined me.name  =  'Darby  Frey'; me;  =>  Person  {name:  'Darby  Frey'}
  53. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions

    this is the Context var  Person  =  function(name,  location){} me  =  new  Person('Darby  Frey',  'Chicago'); me;  =>  Person  {}
  54. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions

    this is the Context var  Person  =  function(name,  location){    this.name  =  name;    this.location  =  location; }; me  =  new  Person('Darby  Frey',  'Chicago'); me;  =>  Person  {name:  "Darby  Frey",  location:   "Chicago"}; me.name;  =>  'Darby  Frey'
  55. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype •

    A Prototype is a blueprint of Attributes and Functions given to an Instance of an Object created by a Constructor Function • Attributes and Functions defined in a Prototype will be available to every Instance of that Object
  56. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype var

     Person  =  function(name,  location){    this.name  =  name;    this.location  =  location; }; Person.prototype  =  {    coolGuy:  true,    chicagoan:  function(){        return  this.location  ==  'Chicago'    } };
  57. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype darby

     =  new  Person('Darby  Frey',  'Chicago'); darby.coolGuy;  =>  true darby.chicagoan();  =>  true shay  =  new  Person('Shay  Howe',  'Ohio'); shay.coolGuy;  =>  true shay.chicagoan();  =>  false
  58. Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice

    JavaScript http:/ /bit.ly/modular-html-css-js
  59. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Approach •

    Stop thinking about pages • Start thinking about components • Take visual inventory
  60. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Themes •

    Decouple HTML and CSS • Separate presentation from layout • Separate content from container • Extend elements with classes • Abstract functionality with objects • Leverage JavaScript templates
  61. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Outcomes •

    Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards
  62. Modular HTML, CSS, & JS @shayhowe & @darbyfrey What’s next

    Build a style guide • Twitter Bootstrap, Zurb Foundation Review methodologies • OOCSS, SMACSS Test your code • CSS Lint, JS Lint, Inspector, PageSpeed, Console
  63. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Thank You!

    @shayhowe learn.shayhowe.com @darbyfrey darbyfrey.com