Modular HTML & CSS Turbo Workshop

TACTICAL
HTML & CSS
MODULAR
HTML & CSS
TURBO WORKSHOP
Shay Howe
@shayhowe
learn.shayhowe.com
Darby Frey
@darbyfrey
darbyfrey.com

@shayhowe & @darbyfreyModular HTML & CSS
Shay Howe
@shayhowe
learn.shayhowe.com
Darby Frey
@darbyfrey
darbyfrey.com

1. The Problem
2. Groundwork
3. Assembling Layout
4. Accommodating Content
5. Turbo with SCSS
6. 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

TURBO
WITH SCSS

SETUP

SCSS
• CSS preprocessor
• Extension of CSS3
• Compiled using Ruby
• Adds nested rules, variables, mixins, selector
inheritance, and more

SCSS
SCSS Syntax
.new
{

color:
#f60;

.item
{

font-‐size:
24px;

}
}
Compiled CSS
.new
{

color:
#f60;
}
.new
.item
{

font-‐size:
24px;
}

SCSS VS. SASS
SCSS Syntax
.new
{

color:
#f60;

.item
{

font-‐size:
24px;

}
}
Sass Syntax
.new

color:
#f60

.item

font-‐size:
24px

COMPASS
• Built on top of Sass
• Includes reusable patterns
• Provides cross browser CSS3 mixins

SCOUT APP
• GUI for compiling Sass and Compass
• Available for both Mac and Windows

SETUP
IN PRACTICE

ORGANIZATION

TECHNIQUE
Settings
• Utility styles (Extends, Mixins, Variables)
Base
• Core styles for entire site (Layout, Typography)
Components
• UI concepts & design patterns (Buttons, List, Navigation)
Modules
• Business logic (Aside, Header, Footer)

TECHNIQUE

PARTIALS
• Must begin with an underscore, _
• Must have a file extension of .scss, not .css.scss

IMPORTS
workshop.css.scss
//
Compass
@import
"compass/css3";
//
Settings
@import
"settings/variables";
//
Base
@import
"base/layout";
...

ORGANIZATION
IN PRACTICE

SETTINGS

VARIABLES
• Allow common values to be shared
• Assigned with a dollar sign, name, colon, and value
• May be a number, string, boolean, null, or multiple
comma separated values

VARIABLES
SCSS Syntax
$font-‐base:
14px;
$sans-‐serif:
"Open
Sans",
sans-‐serif;
p
{

font:
$font-‐base
$sans-‐serif;
}
Compiled CSS
p
{

font:
14px
"Open
Sans",
sans-‐serif;
}

EXTENDS
• Share common styles without duplicating them
• Keep code weight low
• Generates detailed selectors
• Assigned with the @extend
rule followed by the
selector

EXTENDS
SCSS Syntax
.alert
{

border-‐radius:
10px;
}
.alert-‐error
{

@extend
.alert;

color:
#b94a48;
}
.alert-‐success
{

@extend
.alert;

color:
#468847;
}
Compiled CSS
.alert,
.alert-‐error,
.alert-‐success
{

border-‐radius:
10px;
}
.alert-‐error
{

color:
#b94a48;
}
.alert-‐success
{

color:
#468847;
}

PLACEHOLDERS
• Similar to extends
• Selector is assigned with a percentage sign
• Extended selector is not output, only the styles

PLACEHOLDERS
SCSS Syntax
%alert
{

border-‐radius:
10px;
}
.alert-‐error
{

@extend
%alert;

color:
#b94a48;
}
.alert-‐success
{

@extend
%alert;

color:
#468847;
}
Compiled CSS
.alert-‐error,
.alert-‐success
{

border-‐radius:
10px;
}
.alert-‐error
{

color:
#b94a48;
}
.alert-‐success
{

color:
#468847;
}

MIXINS
• Share similar styles based off given arguments
• Duplicates properties, providing different values
• Assigned with the @mixin
rule followed by the
name and arguments

MIXINS
SCSS Syntax
@mixin
btn($color)
{

color:
$color;
}
.btn
{

@mixin
btn(#f60);
}
Compiled CSS
.btn
{

color:
#f60;
}

SETTINGS
IN PRACTICE

REFACTOR

COMMENTS
• Two different types of comments
• Standard CSS comments as normal
• Silent comments, assigned with two forward
slashes, not compiled in the output

COMMENTS
SCSS Syntax
/*
Normal
comment
*/
.awesome
{

color:
#3276b1;
}
//
Omitted
comment
.very-‐awesome
{

color:
#47a447;
}
Compiled CSS
/*
Normal
comment
*/
.awesome
{

color:
#3276b1;
}
.very-‐awesome
{

color:
#47a447;
}

PARENT SELECTOR
• Add styles to a previous selector
• Commonly used with pseudo classes
• Assigned with an ampersand
• May also be used as the key selector

PARENT SELECTOR
SCSS Syntax
a
{

color:
#8ec63f;

&:hover
{

color:
#f7941d;

}
}
Compiled CSS
a
{

color:
#8ec63f;
}
a:hover
{

color:
#f7941d;
}

INTERPOLATION
• Occasionally SCSS need to be interpolated
• Most commonly happens as part of a class name,
property name, or inside a string plain text
• Assigned by placing the value inside #{...}

INTERPOLATION
SCSS Syntax
$logo:
twitter;
$offset:
left;
.#{$logo}
{

#{$offset}:
20px;
}
Compiled CSS
.twitter
{

left:
20px;
}

REFACTOR
IN PRACTICE

COMPILE

OUTPUT STYLES
• SCSS has multiple output styles
• Nested or expanded is best for development
• Compact or compressed is best for production

COMPILE
IN PRACTICE

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 style guide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed

THANK YOU!
Questions?
@shayhowe
@darbyfrey

Modular HTML & CSS Turbo Workshop

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Modular HTML & CSS Turbo Workshop (20)

More from Shay Howe (7)

Recently uploaded (20)

Modular HTML & CSS Turbo Workshop