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.

Transcript

1. Modular HTML, CSS, & JS Workshop Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
2. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
3. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 1 Groundwork 2 HTML & CSS 3 JavaScript 4 Onward
4. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 1 Groundwork
5. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Common Problems • Websites have difficulty scaling • Code bases become brittle • Files and code bases begin to swell
6. Modular HTML, CSS, & JS @shayhowe & @darbyfrey What’s Wrong • Best practices aren’t exactly best practices • Standards need to evolve
7. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
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  {...}
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%; }
10. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices Good .col-­‐1  {    width:  50%; } .col-­‐2  {    width:  75%; }
11. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Maintainability
12. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Code Must Be… • Organized • Modular • Performant
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
14. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code • Do not duplicate code • Remove old code • Defer loading subsequent styles
15. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code Bad .news  {    background:  #ccc;    color:  #666; } .social  {    background:  #ccc;    color:  #666; }
16. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code Good .news, .social  {    background:  #ccc;    color:  #666; } Better .feat-­‐box  {    background:  #ccc;    color:  #666; }
17. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
18. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
19. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
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
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
22. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
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
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; }
25. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity Good .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }
26. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 2 HTML & CSS
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
28. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure Bad .news  {    background:  #ccc;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
29. 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>
30. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements • Stylize elements to be transparent • Keep visual properties apart from layout properties
31. 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>
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; } <ul  class="grid-­‐8  offset-­‐box">...</ul>
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
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; }
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; }
36. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content • Separate content from container • Stylize content regardless of container
37. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
38. 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>
39. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
40. 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>
41. 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>
42. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics • Allow elements to adapt • Uses individual classes to extend modules
43. 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>
44. 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>
45. Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice HTML & CSS http:/ /bit.ly/modular-html-css-js
46. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 3 JavaScript
47. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
48. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
49. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
50. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
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
52. Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript image  =  new  Image('filename.jpg'); image.resize(400,  300);
53. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract and Encapsulate functionality with Objects
54. Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript Primer
57. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions
58. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions function  multiply(one,  two){    return  one  *  two; }; function(one,  two){    return  one  *  two; };
59. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Assigned to Variables var  multiply  =  function(one,  two){    return  one  *  two; }; multiply(3,4);  =>  12
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
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
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'
63. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects
64. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects are Containers for Properties and Functions
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'
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'
67. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions
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
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'}
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  {}
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'
72. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype
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
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'    } };
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
76. Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice JavaScript http:/ /bit.ly/modular-html-css-js
77. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 4 Onward
78. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Approach • Stop thinking about pages • Start thinking about components • Take visual inventory
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
80. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Outcomes • Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards
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
82. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Thank You! @shayhowe learn.shayhowe.com @darbyfrey darbyfrey.com