modular html & css

TACTICALHTML & CSS

Shay [email protected]

MODULAR

HTML & CSS

http://www.shayhowe.com


@shayhoweModular HTML & CSS

SHAY HOWEshayhowe.com – @shayhowe



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

Parade of the Black Sea Fleet by Ivan Aivazovsky


MAINTAINABILITYCode must be...

• Organized

• Modular

• Performant


ORGANIZATION


APPROACH• Stop thinking about pages

• Start thinking about components

• Take visual inventory


TECHNIQUEBase

• Core styles for entire siteNormalize (Reset), Default Elements, Grid, Variables

Components

• User interface concepts & design patternsAlerts, Buttons, Forms, List, Pagination, Tooltips

Modules

• Business logicAside, Header, Footer


TECHNIQUE


MODULARITY


ASSEMBLE LAYOUT• Separate presentation (or theme) from layout

• Create an object layer for layout

• Create a skin layer for theme

• Use a grid


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

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


ASSEMBLE LAYOUTGood.grid-‐4 { margin: 0 10px; width: 400px;}.feat-‐box { background: #eee; color: #666;}

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


ACCOMMODATE CONTENT• Separate content from container

• Stylize content regardless of container


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

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


ACCOMMODATE 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>


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


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>


METHODOLOGIESOOCSS

• Object-Oriented CSSFrom Nicole Sullivan – oocss.org

SMACSS

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


PERFORMANCE


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


MINIMIZE REQUEST• Combine like files (CSS & JS)

• Use image sprites

• Leverage data URIs

• Icon fonts


IMAGE SPRITES<span class="icon i-‐twitter">...</span><span class="icon i-‐facebook">...</span>

.icon { background: url("icons.png") 0 0 no-‐repeat;}.i-‐twitter { background-‐position: 0 -‐16px;}.i-‐facebook { background-‐position: 0 -‐32px;}


DATA URISHTML<img height="100" width="660" alt="Pattern" src="data:imagepng;base64,...">

CSS.pattern { background: url("data:imagepng;base64,...") repeat;}


COMPRESS & CACHE FILES• Utilize Gzip compression

• Losslessly compress images

• Cache common files

COMPRESS & CACHE FILES



Original 455kb Optimized 401kb

Ships on the Roadstead by Willem van de Velde the Younger


GETTING STARTEDBuild a styleguide

• Twitter Bootstrap, Zurb Foundation

Review methodologies

• OOCSS, SMACSS

Test your code

• CSS Lint, Inspector, PageSpeed


THANK YOU!Questions?

@shayhowehttp://learn.shayhowe.comhttp://bit.ly/mod-html-css

http://bit.ly/13BietF

http://bit.ly/13BietF

modular html & css

Design