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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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>

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>

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

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

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

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

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

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>

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

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>

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>

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

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>

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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'

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

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

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'

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'

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

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

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

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

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'

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

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

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

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

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

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

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

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

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

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

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