modular html & css workshop

TACTICALHTML & CSS

Shay [email protected]

MODULAR

HTML & CSSWORKSHOP

@shayhoweModular HTML & CSS

Shay Howe@shayhowe

learn.shayhowe.com


1. The Problem2. Groundwork3. Assembling Layout4. Accommodating Content5. Onward

OUR SCHEDULE


THEPROBLEM

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 PRACTICESAvoiding classessection ul#nav li {...}section:nth-‐child(2) div:nth-‐child(7) > a {...}

Leveraging selectorsa.btn {...}#main a.btn {...}#main div.feature a.btn {...}


BEST BAD PRACTICESBad#contact li:nth-‐child(1) input,#contact li:nth-‐child(2) input { width: 160px;}#contact li:nth-‐child(3) textarea { width: 280px;}


BEST BAD PRACTICESGood.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 SPECIFICITYFormula

• IDs, Classes/Pseudo-classes/Attributes, Elements

High Specificity (Bad)

#primary #main div.gallery figure.mediaIDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2

Low Specificity (Good)

.gallery-‐mediaIDs: 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 SPECIFICITYBad#primary #main div.gallery { text-‐transform: uppercase;}#primary #main div.gallery figure.media { background: #ccc;}


WATCH SPECIFICITYGood.gallery { text-‐transform: uppercase;}.gallery-‐media { background: #ccc;}

Parade of the Black Sea Fleet by Ivan Aivazovsky


MAINTAINABILITYCode must be...

• Organized

• Modular

• Performant


METHODOLOGIESOOCSS

• Object-Oriented CSSFrom Nicole Sullivan – oocss.org

SMACSS

• Scalable and Modular Architecture for CSSFrom Jonathan Snook – smacss.com


GROUNDWORK


REUSE CODE• Do not duplicate code

• Remove old code

• Defer loading subsequent styles


REUSE CODEBad.news { background: #eee; color: #666;}.social { background: #eee; color: #666;}


REUSE CODEGood.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 CLASSESBad.feat-‐box .callout .pr { font-‐size: 12px;}.feat-‐box .callout .pr .un { color: #39f;}


USE CLASSESGood.feat-‐box .price { font-‐size: 12px;}.feat-‐box .unit { color: #39f;}


USE CLASSESBad.btn.large { font-‐size: 24px; padding: 15px 30px;}

<div class="btn large">...</div>


USE CLASSESGood.btn-‐large { font-‐size: 24px; padding: 15px 30px;}

<div class="btn-‐large">...</div>


ASSEMBLINGLAYOUT


ABSTRACT STRUCTURE• Separate presentation (or theme) from layout

• Create an object layer for layout

• Create a skin layer for theme

• Use a grid


ABSTRACT STRUCTUREBad.news { background: #eee; color: #666; margin: 0 10px; width: 400px;}

<div class="news">...</div>


ABSTRACT STRUCTUREGood.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


TRANSPARENTIZE ELEMENTSBad.pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px;}

<ul class="pagination">...</ul>


TRANSPARENTIZE ELEMENTSGood.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


CREATE ADAPTABLE LAYOUTSBad#main { float: left; margin: 0 10px; width: 620px;}#aside { float: left; margin: 0 10px; width: 300px;}


CREATE ADAPTABLE LAYOUTSGood.grid-‐4,.grid-‐8 { float: left; margin: 0 10px;}.grid-‐4 { width: 300px;}.grid-‐8 { width: 620px;}


ASSEMBLING LAYOUT

IN PRACTICEhttp://bit.ly/modular-html-css


ACCOMMODATINGCONTENT


SEPARATE CONTENT• Separate content from container

• Stylize content regardless of container


SEPARATE CONTENTBad.alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px;}

<div class="alert">...</div>


SEPARATE CONTENTGood.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


AVOID PARENT DEPENDENCYBad.feat-‐box { background: #eee;}article .feat-‐box { background: #fff;}

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


AVOID PARENT DEPENDENCYGood.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 SEMANTICSBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}

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


FAVOR SEMANTICSGood.feat-‐subhead { color: #f60; font: 18px Helvetica, sans-‐serif;}

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


ACCOMMODATING CONTENT

IN PRACTICEhttp://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 NEXTBuild a styleguide

• Twitter Bootstrap, Zurb Foundation

Review methodologies

• OOCSS, SMACSS

Test your code

• CSS Lint, Inspector, PageSpeed


THANK YOU!Questions?

@shayhowehttp://learn.shayhowe.com

modular html & css workshop

Design