You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
5. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Common Problems
• Websites have difficulty scaling
• Code bases become brittle
• Files and code bases begin to swell
6. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
What’s Wrong
• Best practices aren’t exactly best practices
• Standards need to evolve
7. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors
8. 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
{...}
9. 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%;
}
10. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
Good
.col-‐1
{
width:
50%;
}
.col-‐2
{
width:
75%;
}
20. 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
27. 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
30. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Transparentize Elements
• Stylize elements to be transparent
• Keep visual properties apart from layout
properties
33. 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
68. 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
69. 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'}
70. 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
{}
71. 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'
73. 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
78. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Approach
• Stop thinking about pages
• Start thinking about components
• Take visual inventory
79. 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