Slide 1
Slide 1 text
TACTICAL
HTML & CSS
Shay Howe
@shayhowe
shayhowe.com
MODULAR
HTML & CSS
Slide 2
Slide 2 text
@shayhowe
Modular HTML & CSS
SHAY HOWE
shayhowe.com – @shayhowe
Slide 3
Slide 3 text
The Gust by Willem van de Velde the Younger
Slide 4
Slide 4 text
@shayhowe
Modular HTML & CSS
COMMON PROBLEMS
• Websites have difficulty scaling
• Code becomes brittle
• Files and code bases begin to swell
Slide 5
Slide 5 text
@shayhowe
Modular HTML & CSS
WHAT’S WRONG
• Best practices aren’t exactly best practices
• Standards need to evolve
Slide 6
Slide 6 text
@shayhowe
Modular HTML & CSS
BEST BAD PRACTICES
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors
Slide 7
Slide 7 text
@shayhowe
Modular HTML & CSS
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
{...}
Slide 8
Slide 8 text
@shayhowe
Modular HTML & CSS
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;
}
Slide 9
Slide 9 text
@shayhowe
Modular HTML & CSS
BEST BAD PRACTICES
Good
.col-‐1
{
width:
160px;
}
.col-‐2
{
width:
280px;
}
Slide 10
Slide 10 text
@shayhowe
Modular HTML & CSS
SPECIFICITY?
• Specificity determines which styles are applied
• Each selector has a specificity weight
• High specificity beats low specificity
• Low specificity is key
Slide 11
Slide 11 text
Parade of the Black Sea Fleet by Ivan Aivazovsky
Slide 12
Slide 12 text
@shayhowe
Modular HTML & CSS
MAINTAINABILITY
Code must be...
• Organized
• Modular
• Performant
Slide 13
Slide 13 text
@shayhowe
Modular HTML & CSS
ORGANIZATION
Slide 14
Slide 14 text
@shayhowe
Modular HTML & CSS
APPROACH
• Stop thinking about pages
• Start thinking about components
• Take visual inventory
Slide 15
Slide 15 text
@shayhowe
Modular HTML & CSS
TECHNIQUE
Base
• Core styles for entire site
Normalize (Reset), Default Elements, Grid, Variables
Components
• User interface concepts & design patterns
Alerts, Buttons, Forms, List, Pagination, Tooltips
Modules
• Business logic
Aside, Header, Footer
Slide 16
Slide 16 text
@shayhowe
Modular HTML & CSS
TECHNIQUE
Slide 17
Slide 17 text
@shayhowe
Modular HTML & CSS
MODULARITY
Slide 18
Slide 18 text
@shayhowe
Modular HTML & CSS
ASSEMBLE LAYOUT
• Separate presentation (or theme) from layout
• Create an object layer for layout
• Create a skin layer for theme
• Use a grid
Slide 19
Slide 19 text
@shayhowe
Modular HTML & CSS
ASSEMBLE LAYOUT
Bad
.news
{
background:
#eee;
color:
#666;
margin:
0
10px;
width:
400px;
}
...
Slide 20
Slide 20 text
@shayhowe
Modular HTML & CSS
ASSEMBLE LAYOUT
Good
.grid-‐4
{
margin:
0
10px;
width:
400px;
}
.feat-‐box
{
background:
#eee;
color:
#666;
}
...
Slide 21
Slide 21 text
@shayhowe
Modular HTML & CSS
ACCOMMODATE CONTENT
• Separate content from container
• Stylize content regardless of container
Slide 22
Slide 22 text
@shayhowe
Modular HTML & CSS
ACCOMMODATE CONTENT
Bad
.alert
{
background:
#f2dede;
border-‐radius:
10px;
color:
#b94a48;
padding:
10px
20px;
}
...
Slide 23
Slide 23 text
@shayhowe
Modular HTML & CSS
ACCOMMODATE CONTENT
Good
.alert
{
border-‐radius:
10px;
padding:
10px
20px;
}
.alert-‐error
{
background:
#f2dede;
color:
#b94a48;
}
...
Slide 24
Slide 24 text
@shayhowe
Modular HTML & CSS
AVOID PARENT DEPENDENCY
• Remove parent container dependency
• Decouple CSS from HTML
• Create components to be used anywhere
Slide 25
Slide 25 text
@shayhowe
Modular HTML & CSS
AVOID PARENT DEPENDENCY
Bad
.feat-‐box
{
background:
#eee;
}
article
.feat-‐box
{
background:
#fff;
}
...
Slide 26
Slide 26 text
@shayhowe
Modular HTML & CSS
AVOID PARENT DEPENDENCY
Good
.feat-‐box
{
background:
#eee;
}
.feat-‐box-‐alt
{
background:
#fff;
}
...
Slide 27
Slide 27 text
@shayhowe
Modular HTML & CSS
FAVOR SEMANTICS
• Allow elements to adapt
• Uses individual classes to extend modules
Slide 28
Slide 28 text
@shayhowe
Modular HTML & CSS
FAVOR SEMANTICS
Bad
.feat-‐box
h2
{
color:
#f60;
font:
18px
Helvetica,
sans-‐serif;
}
...
Slide 29
Slide 29 text
@shayhowe
Modular HTML & CSS
FAVOR SEMANTICS
Good
.feat-‐subhead
{
color:
#f60;
font:
18px
Helvetica,
sans-‐serif;
}
...
Slide 30
Slide 30 text
@shayhowe
Modular HTML & CSS
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
Slide 31
Slide 31 text
@shayhowe
Modular HTML & CSS
Slide 32
Slide 32 text
@shayhowe
Modular HTML & CSS
WATCH SPECIFICITY
• Be explicit
• Keep specificity low
• Never use IDs or !important
• Avoid nested selectors (#main
.spotlight
strong
span)
Slide 33
Slide 33 text
@shayhowe
Modular HTML & CSS
WATCH SPECIFICITY
Bad
#primary
#main
div.gallery
{
text-‐transform:
uppercase;
}
#primary
#main
div.gallery
figure.media
{
background:
#ccc;
}
Slide 34
Slide 34 text
@shayhowe
Modular HTML & CSS
WATCH SPECIFICITY
Good
.gallery
{
text-‐transform:
uppercase;
}
.gallery-‐media
{
background:
#ccc;
}
Slide 35
Slide 35 text
@shayhowe
Modular HTML & CSS
USE CLASSES
• Write understandable class names
• Avoid unnecessary nesting
• Use same strength specificity
Slide 36
Slide 36 text
@shayhowe
Modular HTML & CSS
USE CLASSES
Bad
.feat-‐box
.callout
.pr
{
font-‐size:
12px;
}
.feat-‐box
.callout
.pr
.un
{
color:
#39f;
}
Slide 37
Slide 37 text
@shayhowe
Modular HTML & CSS
USE CLASSES
Good
.feat-‐box
.price
{
font-‐size:
12px;
}
.feat-‐box
.unit
{
color:
#39f;
}
Slide 38
Slide 38 text
@shayhowe
Modular HTML & CSS
USE CLASSES
Bad
.btn.large
{
font-‐size:
24px;
padding:
15px
30px;
}
...
Slide 39
Slide 39 text
@shayhowe
Modular HTML & CSS
USE CLASSES
Good
.btn-‐large
{
font-‐size:
24px;
padding:
15px
30px;
}
...
Slide 40
Slide 40 text
@shayhowe
Modular HTML & CSS
METHODOLOGIES
OOCSS
• Object-Oriented CSS
From Nicole Sullivan – oocss.org
SMACSS
• Scalable and Modular Architecture for CSS
From Jonathan Snook – smacss.com
Slide 41
Slide 41 text
@shayhowe
Modular HTML & CSS
PERFORMANCE
Slide 42
Slide 42 text
@shayhowe
Modular HTML & CSS
REUSE CODE
• Do not duplicate code
• Remove old code
• Defer loading subsequent styles
Slide 43
Slide 43 text
@shayhowe
Modular HTML & CSS
REUSE CODE
Bad
.news
{
background:
#eee;
color:
#666;
}
.social
{
background:
#eee;
color:
#666;
}
Slide 44
Slide 44 text
@shayhowe
Modular HTML & CSS
REUSE CODE
Good
.news,
.social
{
background:
#eee;
color:
#666;
}
Better
.feat-‐box
{
background:
#eee;
color:
#666;
}
Slide 45
Slide 45 text
@shayhowe
Modular HTML & CSS
MINIMIZE REQUEST
• Combine like files (CSS & JS)
• Use image sprites
• Leverage data URIs
• Icon fonts
Slide 46
Slide 46 text
@shayhowe
Modular HTML & CSS
IMAGE SPRITES
...
...
.icon
{
background:
url("icons.png")
0
0
no-‐repeat;
}
.i-‐twitter
{
background-‐position:
0
-‐16px;
}
.i-‐facebook
{
background-‐position:
0
-‐32px;
}
Slide 47
Slide 47 text
@shayhowe
Modular HTML & CSS
DATA URIS
HTML
![]()
CSS
.pattern
{
background:
url("data:imagepng;base64,...")
repeat;
}
Slide 48
Slide 48 text
@shayhowe
Modular HTML & CSS
COMPRESS & CACHE FILES
• Utilize Gzip compression
• Losslessly compress images
• Cache common files
Slide 49
Slide 49 text
COMPRESS & CACHE FILES
Slide 50
Slide 50 text
@shayhowe
Modular HTML & CSS
COMPRESS & CACHE FILES
Slide 51
Slide 51 text
@shayhowe
Modular HTML & CSS
COMPRESS & CACHE FILES
Original 455kb Optimized 401kb
Slide 52
Slide 52 text
Ships on the Roadstead by Willem van de Velde the Younger
Slide 53
Slide 53 text
@shayhowe
Modular HTML & CSS
GETTING STARTED
Build a styleguide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
@shayhowe
Modular HTML & CSS
THANK YOU!
Questions?
@shayhowe
http://learn.shayhowe.com
http://bit.ly/mod-html-css