Modular HTML, CSS, & JS Workshop

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

View Slide

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

View Slide

1 Groundwork
2 HTML & CSS
3 JavaScript
4 Onward

View Slide

1
Groundwork

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

Best Bad Practices
Good
.col-‐1 {
width: 50%;
}
.col-‐2 {
width: 75%;
}

View Slide

Maintainability

View Slide

Code Must Be…
• Organized
• Modular
• Performant

View Slide

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

View Slide

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

View Slide

Reuse Code
Bad
.news {
background: #ccc;
color: #666;
}
.social {
background: #ccc;
color: #666;
}

View Slide

Reuse Code
Good
.news,
.social {
background: #ccc;
color: #666;
}
Better
.feat-‐box {
background: #ccc;
color: #666;
}

View Slide

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

View Slide

Use Classes
Bad
.feat-‐box .callout .pr {
font-‐size: 12px;
}
.feat-‐box .callout .pr .un {
color: #39f;
}

View Slide

Use Classes
Good
.feat-‐box .price {
font-‐size: 12px;
}
.feat-‐box .unit {
color: #39f;
}

View Slide

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

View Slide

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


View Slide

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

View Slide

Watch Speciﬁcity
Bad
#primary #main div.gallery {
text-‐transform: uppercase;
}
#primary #main div.gallery figure.media {
background: #ccc;
}

View Slide

Watch Speciﬁcity
Good
.gallery {
text-‐transform: uppercase;
}
.gallery-‐media {
background: #ccc;
}

View Slide

2
HTML & CSS

View Slide

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

Abstract Structure
Bad
.news {
background: #ccc;
color: #666;
margin: 0 10px;
width: 400px;
}
...

View Slide

Abstract Structure
Good
.grid-‐4 {
margin: 0 10px;
width: 400px;
}
.feat-‐box {
background: #ccc;
color: #666;
}
...

View Slide

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

View Slide

Bad
.pagination {
border-‐radius: 5px;
border: 1px solid #eee;
margin: 0 10px;
width: 620px;
}
...

View Slide

Good
.grid-‐8 {
margin: 0 10px;
width: 620px;
}
.offset-‐box {
border: 1px solid #eee;
}
...

View Slide

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

View Slide

Bad
#main {
float: left;
margin: 0 10px;
width: 620px;
}
#aside {
float: left;
margin: 0 10px;
width: 300px;
}

View Slide

Good
.grid-‐4,
.grid-‐8 {
float: left;
margin: 0 10px;
}
.grid-‐4 {
width: 300px;
}
.grid-‐8 {
width: 620px;
}

View Slide

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

View Slide

Separate Content
Bad
.alert {
background: #f2dede;
color: #b94a48;
padding: 10px 20px;
}
...

View Slide

Separate Content
Good
.alert {
padding: 10px 20px;
}
.alert-‐error {
background: #f2dede;
color: #b94a48;
}
...

View Slide

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

View Slide

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

...

View Slide

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

...

View Slide

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

View Slide

Favor Semantics
Bad
.feat-‐box h2 {
color: #f60;
font: 18px Helvetica, sans-‐serif;
}

...

View Slide

Favor Semantics
Good
.feat-‐subhead {
color: #f60;
font: 18px Helvetica, sans-‐serif;
}

...

View Slide

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

View Slide

3
JavaScript

View Slide


View Slide

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

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

View Slide

Abstract and Encapsulate
functionality with Objects

View Slide

JavaScript Primer

View Slide

View Slide

Functions

View Slide

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

View Slide

Functions
Assigned to Variables
var multiply = function(one, two){
return one * two;
};
multiply(3,4); => 12

View Slide

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

View Slide

Functions
Pass as Arguments to Functions (Callback Pattern)
return one * two;
};
var sumSquare = function(one, two, callback){
sum = one + two;
return callback(sum, sum);
};
sumSquare(1, 2, multiply); => 9

View Slide

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

Objects

View Slide

Objects are Containers for
Properties and Functions

View Slide

Objects
Simple Object
var person = {
name: 'Darby Frey',
twitter: '@darbyfrey'
};
person.name; => 'Darby Frey'
person.location; => 'Chicago'
person.twitter; => '@darbyfrey'

View Slide

Objects
Functions as Properties
var person = {
name: 'Darby Frey',
twitter: '@darbyfrey',
nameAndLoc: function(){
return this.name + ' -‐ ' + this.location;
}
};
person.nameAndLoc(); =>'Darby Frey -‐ Chicago'

View Slide

Constructor Functions

View Slide

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

View Slide

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

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

View Slide

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

Prototype

View Slide

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

View Slide

Prototype
var Person = function(name, location){
this.name = name;
this.location = location;
};
Person.prototype = {
coolGuy: true,
chicagoan: function(){
return this.location == 'Chicago'
}
};

View Slide

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

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

View Slide

4
Onward

View Slide

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

View Slide

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

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

View Slide

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

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

View Slide

Modular HTML, CSS, & JS Workshop

Modular HTML, CSS, & JS Workshop

Shay Howe

More Decks by Shay Howe

Other Decks in Design

Featured

Transcript