modular html & css workshop

TACTICALHTML & CSS

Shay Howe@shayhowelearn.shayhowe.com

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

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

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

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

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

TRANSPARENTIZE ELEMENTSGood.grid-‐8 { margin: 0 10px; width: 620px;}.offset-‐box { border-‐radius: 5px; border: 1px solid #eee;}

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

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

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

AVOID PARENT DEPENDENCYGood.feat-‐box { background: #eee;}.feat-‐box-‐alt { background: #fff;}

FAVOR SEMANTICS• Allow elements to adapt

• Uses individual classes to extend modules

FAVOR SEMANTICSBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}

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

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

html&css 6 - advanced css

html + css examples

_ html, xhtml & css

html e css

basic html/css

html css real

learn html css

html css notes

html & css

html css-presentation

html / css – basics

html css basics

html y css

html&css 2 - intermediate html

html - css

examples css html

html,javascript & css

html, css, javascript

html si css

html&css pp