Modular HTML & CSS Workshop

TACTICAL
HTML & CSS
Shay Howe
@shayhowe
learn.shayhowe.com
MODULAR
HTML & CSS
WORKSHOP

@shayhoweModular HTML & CSS
Shay Howe
@shayhowe
learn.shayhowe.com

1. The Problem
2. Groundwork
3. Assembling Layout
4. Accommodating Content
5. Onward
OUR SCHEDULE

THE
PROBLEM

The Gust by Willem van de Velde the Younger

COMMON PROBLEMS
• Websites have difficulty scaling
• Code becomes 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
section
ul#nav
li
{...}
section:nth-‐child(2)
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:
160px;
}
#contact
li:nth-‐child(3)
textarea
{

width:
280px;
}

BEST BAD PRACTICES
Good
.col-‐1
{

width:
160px;
}
.col-‐2
{

width:
280px;
}

SPECIFICITY?
• 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 SPECIFICITY
• Be explicit
• Keep specificity low
• Never use IDs or !important
• Avoid nested selectors (#main
.spotlight
strong
span)

WATCH SPECIFICITY
Bad
#primary
#main
div.gallery
{

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

background:
#ccc;
}

WATCH SPECIFICITY
Good
.gallery
{

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

background:
#ccc;
}

Parade of the Black Sea Fleet by Ivan Aivazovsky

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

GROUNDWORK

REUSE CODE
• Do not duplicate code
• Remove old code
• Defer loading subsequent styles

REUSE CODE
Bad
.news
{

background:
#eee;

color:
#666;
}
.social
{

background:
#eee;

color:
#666;
}

REUSE CODE
Good
.news,
.social
{

background:
#eee;

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

background:
#eee;

color:
#666;
}

USE CLASSES
• Write understandable class names
• Avoid unnecessary nesting
• Use same strength specificity

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

USE CLASSES
Bad
.btn.large
{

font-‐size:
24px;

padding:
15px
30px;
}
<div
class="btn
large">...</div>

USE CLASSES
Good
.btn-‐large
{

font-‐size:
24px;

padding:
15px
30px;
}
<div
class="btn-‐large">...</div>

ASSEMBLING
LAYOUT

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:
#eee;

color:
#666;

margin:
0
10px;

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

ABSTRACT STRUCTURE
Good
.grid-‐4
{

margin:
0
10px;

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

background:
#eee;

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 flexible
• 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;
}

ASSEMBLING LAYOUT
IN PRACTICE
http://bit.ly/modular-html-css

ACCOMMODATING
CONTENT

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:
#eee;
}
article
.feat-‐box
{

background:
#fff;
}
<article>

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

Good
.feat-‐box
{

background:
#eee;
}
.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>

ACCOMMODATING CONTENT
IN PRACTICE
http://bit.ly/modular-html-css

ONWARD

Ships on the Roadstead by Willem van de Velde the Younger

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

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

WHAT’S NEXT
Build a styleguide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed

THANK YOU!
Questions?
@shayhowe
http://learn.shayhowe.com

Modular HTML & CSS Workshop

Recommended

More Related Content

What's hot (20)

Similar to Modular HTML & CSS Workshop (20)

More from Shay Howe (9)

Recently uploaded (20)

Modular HTML & CSS Workshop