Upload
shay-howe
View
222
Download
0
Embed Size (px)
Citation preview
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 PracticesAvoiding classesarticle#main aside ul li {...}section:last-‐child div:nth-‐child(7) a {...}
Leveraging selectorsa.btn {...}#main a.btn {...}#main div.feature a.btn {...}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad PracticesBad#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 PracticesGood.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
MethodologiesOOCSS• 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 CodeBad.news { background: #ccc; color: #666;}.social { background: #ccc; color: #666;}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Reuse CodeGood.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 ClassesBad.feat-‐box .callout .pr { font-‐size: 12px;}.feat-‐box .callout .pr .un { color: #39f;}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Use ClassesGood.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 SpecificityFormulaIDs, 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 selectorsheader#main div.spotlight strong span
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Watch SpecificityBad#primary #main div.gallery { text-‐transform: uppercase;}#primary #main div.gallery figure.media { background: #ccc;}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Watch SpecificityGood.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 StructureBad.news { background: #ccc; color: #666; margin: 0 10px; width: 400px;}
<div class="news">...</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Abstract StructureGood.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 ElementsBad.pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px;}
<ul class="pagination">...</ul>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Transparentize ElementsGood.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 LayoutsBad#main { float: left; margin: 0 10px; width: 620px;}#aside { float: left; margin: 0 10px; width: 300px;}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Create Adaptable LayoutsGood.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 ContentBad.alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px;}
<div class="alert">...</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Separate ContentGood.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 DependencyBad.feat-‐box { background: #ccc;}article .feat-‐box { background: #fff;}
<article> <div class="feat-‐box">...</div></article>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Avoid Parent DependencyGood.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 SemanticsBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}
<div class="feat-‐box"> <h2>...</h2></div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Favor SemanticsGood.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 & CSShttp://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
JavaScriptfs.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
JavaScriptimage = new Image('filename.jpg');
image.resize(400, 300);
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Abstract and Encapsulatefunctionality with Objects
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
JavaScript Primer
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Functionsfunction multiply(one, two){ return one * two;};
function(one, two){ return one * two;};
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
FunctionsAssigned to Variablesvar multiply = function(one, two){ return one * two;};
multiply(3,4); => 12
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
FunctionsElements in an Arrayvar multiply = function(one, two){ return one * two;};
var array = [1, 2, 3, multiply];
array[3](3,4); => 12
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
FunctionsPass 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
FunctionsProperties of an Objectvar 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 are Containers forProperties and Functions
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
ObjectsSimple Objectvar person = { name: 'Darby Frey', location: 'Chicago', twitter: '@darbyfrey'};
person.name; => 'Darby Frey'person.location; => 'Chicago'person.twitter; => '@darbyfrey'
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
ObjectsFunctions as Propertiesvar 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 FunctionsWhen 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 Functionsvar 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 Functionsthis is the Contextvar Person = function(name, location){}
me = new Person('Darby Frey', 'Chicago');me; => Person {}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Constructor Functionsthis is the Contextvar 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• 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
Prototypevar 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
Prototypedarby = new Person('Darby Frey', 'Chicago');darby.coolGuy; => truedarby.chicagoan(); => true
shay = new Person('Shay Howe', 'Ohio');shay.coolGuy; => trueshay.chicagoan(); => false
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
In Practice
JavaScripthttp://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 nextBuild a style guide• Twitter Bootstrap, Zurb Foundation
Review methodologies• OOCSS, SMACSS
Test your code• CSS Lint, JS Lint, Inspector, PageSpeed,
Console