Modular HTML, CSS, & JS Workshop

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

1 Groundwork
2 HTML & CSS
3 JavaScript
4 Onward

1
Groundwork

Common Problems
• Websites have diﬃculty scaling
• Code bases become brittle
• Files and code bases begin to swell

What’s Wrong
• Best practices aren’t exactly best practices
• Standards need to evolve

Best Bad Practices
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors

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

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

Best Bad Practices
Good
.col-‐1
{

width:
50%;
}
.col-‐2
{

width:
75%;
}

Maintainability

Code Must Be…
• Organized
• Modular
• Performant

Methodologies
OOCSS
• Object-Oriented CSS
From Nicole Sullivan – oocss.org
SMACSS
• Scalable and Modular Architecture for CSS
From Jonathan Snook – smacss.com

Reuse Code
• Do not duplicate code
• Remove old code
• Defer loading subsequent styles

Reuse Code
Bad
.news
{

background:
#ccc;

color:
#666;
}
.social
{

background:
#ccc;

color:
#666;
}

Reuse Code
Good
.news,
.social
{

background:
#ccc;

color:
#666;
}
Better
.feat-‐box
{

background:
#ccc;

color:
#666;
}

Use Classes
• Write understandable class names
• Avoid unnecessary nesting
• Use same strength speciﬁcity

Use Classes
Bad
.feat-‐box
.callout
.pr
{

font-‐size:
12px;
}
.feat-‐box
.callout
.pr
.un
{

color:
#39f;
}

Use Classes
Good
.feat-‐box
.price
{

font-‐size:
12px;
}
.feat-‐box
.unit
{

color:
#39f;
}

Specificity?
• Determines which styles are applied
• Each selector has a specificity weight
• High specificity beats low specificity
• Low specificity is key

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

Watch Speciﬁcity
• Be explicit
• Keep speciﬁcity low
• Never use IDs or !important
• Avoid nested selectors
header#main
div.spotlight
strong
span

Watch Speciﬁcity
Bad
#primary
#main
div.gallery
{

text-‐transform:
uppercase;
}
#primary
#main
div.gallery
figure.media
{

background:
#ccc;
}

Watch Speciﬁcity
Good
.gallery
{

text-‐transform:
uppercase;
}
.gallery-‐media
{

background:
#ccc;
}

2
HTML & CSS

Abstract Structure
• Separate presentation(or theme) from layout
• Create an object layer for layout
• Create a skin layer for theme
• Use a grid

Abstract Structure
Bad
.news
{

background:
#ccc;

color:
#666;

margin:
0
10px;

width:
400px;
}
<div
class="news">...</div>

Abstract Structure
Good
.grid-‐4
{

margin:
0
10px;

width:
400px;
}
.feat-‐box
{

background:
#ccc;

color:
#666;
}
<div
class="grid-‐4
feat-‐box">...</div>

Transparentize Elements
• Stylize elements to be transparent
• Keep visual properties apart from layout
properties

Bad
.pagination
{

border-‐radius:
5px;

border:
1px
solid
#eee;

margin:
0
10px;

width:
620px;
}
<ul
class="pagination">...</ul>

Good
.grid-‐8
{

margin:
0
10px;

width:
620px;
}
.offset-‐box
{

border-‐radius:
5px;

border:
1px
solid
#eee;
}
<ul
class="grid-‐8
offset-‐box">...</ul>

Create Adaptable Layouts
• Height and width should be ﬂexible
• Height should extend with content
• Width should extend with a grid

Bad
#main
{

float:
left;

margin:
0
10px;

width:
620px;
}
#aside
{

float:
left;

margin:
0
10px;

width:
300px;
}

Good
.grid-‐4,
.grid-‐8
{

float:
left;

margin:
0
10px;
}
.grid-‐4
{

width:
300px;
}
.grid-‐8
{

width:
620px;
}

Separate Content
• Separate content from container
• Stylize content regardless of container

Separate Content
Bad
.alert
{

background:
#f2dede;

border-‐radius:
10px;

color:
#b94a48;

padding:
10px
20px;
}
<div
class="alert">...</div>

Separate Content
Good
.alert
{

border-‐radius:
10px;

padding:
10px
20px;
}
.alert-‐error
{

background:
#f2dede;

color:
#b94a48;
}
<div
class="alert
alert-‐error">...</div>

Avoid Parent Dependency
• Remove parent container dependency
• Decouple CSS from HTML
• Create components to be used anywhere

Bad
.feat-‐box
{

background:
#ccc;
}
article
.feat-‐box
{

background:
#fff;
}
<article>

<div
class="feat-‐box">...</div>
</article>

Good
.feat-‐box
{

background:
#ccc;
}
.feat-‐box-‐alt
{

background:
#fff;
}
<article>

<div
class="feat-‐box-‐alt">...</div>
</article>

Favor Semantics
• Allow elements to adapt
• Uses individual classes to extend modules

Favor Semantics
Bad
.feat-‐box
h2
{

color:
#f60;

font:
18px
Helvetica,
sans-‐serif;
}
<div
class="feat-‐box">

<h2>...</h2>
</div>

Favor Semantics
Good
.feat-‐subhead
{

color:
#f60;

font:
18px
Helvetica,
sans-‐serif;
}
<div
class="feat-‐box">

<h2
class="feat-‐subhead">...</h2>
</div>

In Practice
HTML & CSS
http://bit.ly/modular-html-css-js

3
JavaScript

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

JavaScript
image
=
new
Image('filename.jpg');
image.resize(400,
300);

Abstract and Encapsulate
functionality with Objects

JavaScript Primer

Modular HTML, CSS, & JS Workshop

Functions

Functions
function
multiply(one,
two){

return
one
*
two;
};
function(one,
two){

return
one
*
two;
};

Functions
Assigned to Variables
var
multiply
=
function(one,
two){

return
one
*
two;
};
multiply(3,4);
=>
12

Functions
Elements in an Array
var
multiply
=
function(one,
two){

return
one
*
two;
};
var
array
=
[1,
2,
3,
multiply];
array[3](3,4);
=>
12

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

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'

Objects

Objects are Containers for
Properties and Functions

Objects
Simple Object
var
person
=
{

name:
'Darby
Frey',

location:
'Chicago',

twitter:
'@darbyfrey'
};
person.name;
=>
'Darby
Frey'
person.location;
=>
'Chicago'
person.twitter;
=>
'@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'

Constructor Functions

When a function is called with the new
keyword it’s a constructor function
• Create a new instance of the object
• Create their own context accessible by the
this keyword

var
Person
=
function(){}
me
=
new
Person();
typeof
me;
=>
object
me;
=>
Person
{}
me.name;
=>
undefined
me.name
=
'Darby
Frey';
me;
=>
Person
{name:
'Darby
Frey'}

this is the Context
var
Person
=
function(name,
location){}
me
=
new
Person('Darby
Frey',
'Chicago');
me;
=>
Person
{}

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'

Prototype

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 deﬁned in a
Prototype will be available to every Instance
of that Object

Prototype
var
Person
=
function(name,
location){

this.name
=
name;

this.location
=
location;
};
Person.prototype
=
{

coolGuy:
true,

chicagoan:
function(){

return
this.location
==
'Chicago'

}
};

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

In Practice
JavaScript
http://bit.ly/modular-html-css-js

4
Onward

Approach
• Stop thinking about pages
• Start thinking about components
• Take visual inventory

Themes
• Decouple HTML and CSS
• Separate presentation from layout
• Separate content from container
• Extend elements with classes
• Abstract functionality with objects
• Leverage JavaScript templates

Outcomes
• Maintainability!
• Reusable code, less duplication
• Flexibility and extensibility
• Improved standards

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

Thank You!
@shayhowe
learn.shayhowe.com
@darbyfrey
darbyfrey.com

Modular HTML, CSS, & JS Workshop

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Modular HTML, CSS, & JS Workshop

Similar to Modular HTML, CSS, & JS Workshop (20)

More from Shay Howe

More from Shay Howe (7)

Recently uploaded

Recently uploaded (20)

Modular HTML, CSS, & JS Workshop