Modular HTML & CSS Turbo Workshop

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

View Slide

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

View Slide

Modular HTML & CSS
1. The Problem
2. Groundwork
3. Assembling Layout
4. Accommodating Content
5. Turbo with SCSS
6. Onward
OUR SCHEDULE

View Slide

Modular HTML & CSS
THE
PROBLEM

View Slide

The Gust by Willem van de Velde the Younger

View Slide

Modular HTML & CSS
COMMON PROBLEMS
• Websites have difficulty scaling
• Code becomes brittle
• Files and code bases begin to swell

View Slide

Modular HTML & CSS
WHAT’S WRONG
• Best practices aren’t exactly best practices
• Standards need to evolve

View Slide

Modular HTML & CSS
BEST BAD PRACTICES
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors

View Slide

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 {...}

View Slide

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

View Slide

Modular HTML & CSS
BEST BAD PRACTICES
Good
.col-‐1 {
width: 160px;
}
.col-‐2 {
width: 280px;
}

View Slide

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

View Slide

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

View Slide

Modular HTML & CSS

View Slide

Modular HTML & CSS
WATCH SPECIFICITY
• Be explicit
• Keep specificity low
• Never use IDs or !important
• Avoid nested selectors (#main .spotlight strong span)

View Slide

Modular HTML & CSS
WATCH SPECIFICITY
Bad
#primary #main div.gallery {
text-‐transform: uppercase;
}
#primary #main div.gallery figure.media {
background: #ccc;
}

View Slide

Modular HTML & CSS
WATCH SPECIFICITY
Good
.gallery {
text-‐transform: uppercase;
}
.gallery-‐media {
background: #ccc;
}

View Slide

Parade of the Black Sea Fleet by Ivan Aivazovsky

View Slide

Modular HTML & CSS
MAINTAINABILITY
Code must be...
• Organized
• Modular
• Performant

View Slide

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

View Slide

Modular HTML & CSS
GROUNDWORK

View Slide

Modular HTML & CSS
REUSE CODE
• Do not duplicate code
• Remove old code
• Defer loading subsequent styles

View Slide

Modular HTML & CSS
REUSE CODE
Bad
.news {
background: #eee;
color: #666;
}
.social {
background: #eee;
color: #666;
}

View Slide

Modular HTML & CSS
REUSE CODE
Good
.news,
.social {
background: #eee;
color: #666;
}
Better
.feat-‐box {
background: #eee;
color: #666;
}

View Slide

Modular HTML & CSS
USE CLASSES
• Write understandable class names
• Avoid unnecessary nesting
• Use same strength specificity

View Slide

Modular HTML & CSS
USE CLASSES
Bad
.feat-‐box .callout .pr {
font-‐size: 12px;
}
.feat-‐box .callout .pr .un {
color: #39f;
}

View Slide

Modular HTML & CSS
USE CLASSES
Good
.feat-‐box .price {
font-‐size: 12px;
}
.feat-‐box .unit {
color: #39f;
}

View Slide

Modular HTML & CSS
USE CLASSES
Bad
.btn.large {
font-‐size: 24px;
padding: 15px 30px;
}
...

View Slide

Modular HTML & CSS
USE CLASSES
Good
.btn-‐large {
font-‐size: 24px;
padding: 15px 30px;
}
...

View Slide

Modular HTML & CSS
ASSEMBLING
LAYOUT

View Slide

Modular HTML & CSS
ABSTRACT STRUCTURE
• Separate presentation (or theme) from layout
• Create an object layer for layout
• Create a skin layer for theme
• Use a grid

View Slide

Modular HTML & CSS
ABSTRACT STRUCTURE
Bad
.news {
background: #eee;
color: #666;
margin: 0 10px;
width: 400px;
}
...

View Slide

Modular HTML & CSS
ABSTRACT STRUCTURE
Good
.grid-‐4 {
margin: 0 10px;
width: 400px;
}
.feat-‐box {
background: #eee;
color: #666;
}
...

View Slide

Modular HTML & CSS
TRANSPARENTIZE ELEMENTS
• Stylize elements to be transparent
• Keep visual properties apart from layout
properties

View Slide

Modular HTML & CSS
Bad
.pagination {
border-‐radius: 5px;
border: 1px solid #eee;
margin: 0 10px;
width: 620px;
}
...

View Slide

Modular HTML & CSS
Good
.grid-‐8 {
margin: 0 10px;
width: 620px;
}
.offset-‐box {
border: 1px solid #eee;
}
...

View Slide

Modular HTML & CSS
CREATE ADAPTABLE LAYOUTS
• Height and width should be flexible
• Height should extend with content
• Width should extend with a grid

View Slide

Modular HTML & CSS
Bad
#main {
float: left;
margin: 0 10px;
width: 620px;
}
#aside {
float: left;
margin: 0 10px;
width: 300px;
}

View Slide

Modular HTML & CSS
Good
.grid-‐4,
.grid-‐8 {
float: left;
margin: 0 10px;
}
.grid-‐4 {
width: 300px;
}
.grid-‐8 {
width: 620px;
}

View Slide

Modular HTML & CSS
ASSEMBLING LAYOUT
IN PRACTICE
http://bit.ly/modular-html-css

View Slide

Modular HTML & CSS
ACCOMMODATING
CONTENT

View Slide

Modular HTML & CSS
SEPARATE CONTENT
• Separate content from container
• Stylize content regardless of container

View Slide

Modular HTML & CSS
SEPARATE CONTENT
Bad
.alert {
background: #f2dede;
color: #b94a48;
padding: 10px 20px;
}
...

View Slide

Modular HTML & CSS
SEPARATE CONTENT
Good
.alert {
padding: 10px 20px;
}
.alert-‐error {
background: #f2dede;
color: #b94a48;
}
...

View Slide

Modular HTML & CSS
AVOID PARENT DEPENDENCY
• Remove parent container dependency
• Decouple CSS from HTML
• Create components to be used anywhere

View Slide

Modular HTML & CSS
Bad
.feat-‐box {
background: #eee;
}
article .feat-‐box {
background: #fff;
}

...

View Slide

Modular HTML & CSS
Good
.feat-‐box {
background: #eee;
}
.feat-‐box-‐alt {
background: #fff;
}

...

View Slide

Modular HTML & CSS
FAVOR SEMANTICS
• Allow elements to adapt
• Uses individual classes to extend modules

View Slide

Modular HTML & CSS
FAVOR SEMANTICS
Bad
.feat-‐box h2 {
color: #f60;
font: 18px Helvetica, sans-‐serif;
}

...

View Slide

Modular HTML & CSS
FAVOR SEMANTICS
Good
.feat-‐subhead {
color: #f60;
font: 18px Helvetica, sans-‐serif;
}

...

View Slide

Modular HTML & CSS
ACCOMMODATING CONTENT
IN PRACTICE

View Slide

Modular HTML & CSS
TURBO
WITH SCSS

View Slide

Modular HTML & CSS
SETUP

View Slide

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

View Slide

Modular HTML & CSS
SCSS
SCSS Syntax
.new {
color: #f60;
.item {
font-‐size: 24px;
}
}
Compiled CSS
.new {
color: #f60;
}
.new .item {
font-‐size: 24px;
}

View Slide

Modular HTML & CSS
SCSS VS. SASS
SCSS Syntax
.new {
color: #f60;
.item {
font-‐size: 24px;
}
}
Sass Syntax
.new
color: #f60
.item
font-‐size: 24px

View Slide

Modular HTML & CSS
COMPASS
• Built on top of Sass
• Includes reusable patterns
• Provides cross browser CSS3 mixins

View Slide

Modular HTML & CSS
SCOUT APP
• GUI for compiling Sass and Compass
• Available for both Mac and Windows

View Slide

Modular HTML & CSS
SETUP
IN PRACTICE

View Slide

Modular HTML & CSS
ORGANIZATION

View Slide

Modular HTML & CSS
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)

View Slide

Modular HTML & CSS
TECHNIQUE

View Slide

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

View Slide

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

View Slide

Modular HTML & CSS
ORGANIZATION
IN PRACTICE

View Slide

Modular HTML & CSS
SETTINGS

View Slide

Modular HTML & CSS
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

View Slide

Modular HTML & CSS
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;
}

View Slide

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

View Slide

Modular HTML & CSS
EXTENDS
SCSS Syntax
.alert {
}
.alert-‐error {
@extend .alert;
color: #b94a48;
}
.alert-‐success {
@extend .alert;
color: #468847;
}
Compiled CSS
.alert,
.alert-‐error,
.alert-‐success {
}
.alert-‐error {
color: #b94a48;
}
.alert-‐success {
color: #468847;
}

View Slide

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

View Slide

Modular HTML & CSS
PLACEHOLDERS
SCSS Syntax
%alert {
}
.alert-‐error {
@extend %alert;
color: #b94a48;
}
.alert-‐success {
@extend %alert;
color: #468847;
}
Compiled CSS
.alert-‐error,
.alert-‐success {
}
.alert-‐error {
color: #b94a48;
}
.alert-‐success {
color: #468847;
}

View Slide

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

View Slide

Modular HTML & CSS
MIXINS
SCSS Syntax
@mixin btn($color) {
color: $color;
}
.btn {
@mixin btn(#f60);
}
Compiled CSS
.btn {
color: #f60;
}

View Slide

Modular HTML & CSS
SETTINGS
IN PRACTICE

View Slide

Modular HTML & CSS
REFACTOR

View Slide

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

View Slide

Modular HTML & CSS
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;
}

View Slide

Modular HTML & CSS
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

View Slide

Modular HTML & CSS
PARENT SELECTOR
SCSS Syntax
a {
color: #8ec63f;
&:hover {
color: #f7941d;
}
}
Compiled CSS
a {
color: #8ec63f;
}
a:hover {
color: #f7941d;
}

View Slide

Modular HTML & CSS
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 #{...}

View Slide

Modular HTML & CSS
INTERPOLATION
SCSS Syntax
$logo: twitter;
$offset: left;
.#{$logo} {
#{$offset}: 20px;
}
Compiled CSS
.twitter {
left: 20px;
}

View Slide

Modular HTML & CSS
REFACTOR
IN PRACTICE

View Slide

Modular HTML & CSS
COMPILE

View Slide

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

View Slide

Modular HTML & CSS
COMPILE
IN PRACTICE

View Slide

Modular HTML & CSS
ONWARD

View Slide

Ships on the Roadstead by Willem van de Velde the Younger

View Slide

Modular HTML & CSS
APPROACH
• Stop thinking about pages
• Start thinking about components
• Take visual inventory

View Slide

Modular HTML & CSS
THEMES
• Decouple HTML and CSS
• Separate presentation from layout
• Separate content from container
• Extend elements with classes

View Slide

Modular HTML & CSS
OUTCOMES
• Maintainability!
• Reusable code, less duplication
• Flexibility and extensibility
• Improved standards

View Slide

Modular HTML & CSS
WHAT’S NEXT
Build a style guide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed

View Slide

Modular HTML & CSS
THANK YOU!
Questions?
@shayhowe
@darbyfrey

View Slide

Modular HTML & CSS Turbo Workshop

Modular HTML & CSS Turbo Workshop

Shay Howe

More Decks by Shay Howe

Other Decks in Technology

Featured

Transcript