$30 off During Our Annual Pro Sale. View Details »

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
    Workshop
    Shay Howe
    @shayhowe
    learn.shayhowe.com
    Darby Frey
    @darbyfrey
    darbyfrey.com

    View Slide

  2. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Shay Howe
    @shayhowe
    learn.shayhowe.com
    Darby Frey
    @darbyfrey
    darbyfrey.com

    View Slide

  3. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    1 Groundwork
    2 HTML & CSS
    3 JavaScript
    4 Onward

    View Slide

  4. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    1
    Groundwork

    View Slide

  5. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Common Problems
    • Websites have difficulty scaling
    • Code bases become brittle
    • Files and code bases begin to swell

    View Slide

  6. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    What’s Wrong
    • Best practices aren’t exactly best practices
    • Standards need to evolve

    View Slide

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

    View Slide

  8. 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  {...}

    View Slide

  9. 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%;
    }

    View Slide

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

    View Slide

  11. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Maintainability

    View Slide

  12. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Code Must Be…
    • Organized
    • Modular
    • Performant

    View Slide

  13. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 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

    View Slide

  21. 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

    View Slide

  22. Modular HTML, CSS, & JS @shayhowe & @darbyfrey

    View Slide

  23. 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

    View Slide

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

    View Slide

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

    View Slide

  26. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    2
    HTML & CSS

    View Slide

  27. 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

    View Slide

  28. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Abstract Structure
    Bad
    .news  {
       background:  #ccc;
       color:  #666;
       margin:  0  10px;
       width:  400px;
    }
    ...

    View Slide

  29. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Abstract Structure
    Good
    .grid-­‐4  {
       margin:  0  10px;
       width:  400px;
    }
    .feat-­‐box  {
       background:  #ccc;
       color:  #666;
    }
    ...

    View Slide

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

    View Slide

  31. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Transparentize Elements
    Bad
    .pagination  {
       border-­‐radius:  5px;
       border:  1px  solid  #eee;
       margin:  0  10px;
       width:  620px;
    }
    ...

    View Slide

  32. 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;
    }
    ...

    View Slide

  33. 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

    View Slide

  34. 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;
    }

    View Slide

  35. 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;
    }

    View Slide

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

    View Slide

  37. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Separate Content
    Bad
    .alert  {
       background:  #f2dede;
       border-­‐radius:  10px;
       color:  #b94a48;
       padding:  10px  20px;
    }
    ...

    View Slide

  38. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Separate Content
    Good
    .alert  {
       border-­‐radius:  10px;
       padding:  10px  20px;
    }
    .alert-­‐error  {
       background:  #f2dede;
       color:  #b94a48;
    }
    ...

    View Slide

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

    View Slide

  40. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Avoid Parent Dependency
    Bad
    .feat-­‐box  {
       background:  #ccc;
    }
    article  .feat-­‐box  {
       background:  #fff;
    }

       ...

    View Slide

  41. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Avoid Parent Dependency
    Good
    .feat-­‐box  {
       background:  #ccc;
    }
    .feat-­‐box-­‐alt  {
       background:  #fff;
    }

       ...

    View Slide

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

    View Slide

  43. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Favor Semantics
    Bad
    .feat-­‐box  h2  {
       color:  #f60;
       font:  18px  Helvetica,  sans-­‐serif;
    }

       ...

    View Slide

  44. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Favor Semantics
    Good
    .feat-­‐subhead  {
       color:  #f60;
       font:  18px  Helvetica,  sans-­‐serif;
    }

       ...

    View Slide

  45. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    In Practice
    HTML & CSS
    http:/
    /bit.ly/modular-html-css-js

    View Slide

  46. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    3
    JavaScript

    View Slide

  47. Modular HTML, CSS, & JS @shayhowe & @darbyfrey

    View Slide

  48. Modular HTML, CSS, & JS @shayhowe & @darbyfrey

    View Slide

  49. Modular HTML, CSS, & JS @shayhowe & @darbyfrey

    View Slide

  50. Modular HTML, CSS, & JS @shayhowe & @darbyfrey

    View Slide

  51. 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

    View Slide

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

    View Slide

  53. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Abstract and Encapsulate
    functionality with Objects

    View Slide

  54. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    JavaScript Primer

    View Slide

  55. View Slide

  56. View Slide

  57. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Functions

    View Slide

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

    View Slide

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

    View Slide

  60. 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

    View Slide

  61. 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

    View Slide

  62. 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'

    View Slide

  63. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Objects

    View Slide

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

    View Slide

  65. 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'

    View Slide

  66. 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'

    View Slide

  67. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Constructor Functions

    View Slide

  68. 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

    View Slide

  69. 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'}

    View Slide

  70. 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  {}

    View Slide

  71. 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'

    View Slide

  72. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Prototype

    View Slide

  73. 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

    View Slide

  74. 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'
       }
    };

    View Slide

  75. 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

    View Slide

  76. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    In Practice
    JavaScript
    http:/
    /bit.ly/modular-html-css-js

    View Slide

  77. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    4
    Onward

    View Slide

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

    View Slide

  79. 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

    View Slide

  80. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Outcomes
    • Maintainability!
    • Reusable code, less duplication
    • Flexibility and extensibility
    • Improved standards

    View Slide

  81. 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

    View Slide

  82. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
    Thank You!
    @shayhowe
    learn.shayhowe.com
    @darbyfrey
    darbyfrey.com

    View Slide