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

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

More Related Content

What's hot

Viewers also liked

Similar to Modular HTML, CSS, & JS Workshop

More from Shay Howe

Recently uploaded

Modular HTML, CSS, & JS Workshop