Upload
shay-howe
View
59
Download
2
Embed Size (px)
Citation preview
@shayhoweModular HTML & CSS
Shay Howe@shayhowe
learn.shayhowe.com
@shayhoweModular HTML & CSS
1. The Problem2. Groundwork3. Assembling Layout4. Accommodating Content5. Onward
OUR SCHEDULE
@shayhoweModular HTML & CSS
THEPROBLEM
The Gust by Willem van de Velde the Younger
@shayhoweModular HTML & CSS
COMMON PROBLEMS• Websites have difficulty scaling
• Code becomes brittle
• Files and code bases begin to swell
@shayhoweModular HTML & CSS
WHAT’S WRONG• Best practices aren’t exactly best practices
• Standards need to evolve
@shayhoweModular HTML & CSS
BEST BAD PRACTICES• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors
@shayhoweModular HTML & CSS
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 {...}
@shayhoweModular HTML & CSS
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;}
@shayhoweModular HTML & CSS
BEST BAD PRACTICESGood.col-‐1 { width: 160px;}.col-‐2 { width: 280px;}
@shayhoweModular HTML & CSS
SPECIFICITY?• Specificity determines which styles are applied
• Each selector has a specificity weight
• High specificity beats low specificity
• Low specificity is key
@shayhoweModular HTML & CSS
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
@shayhoweModular HTML & CSS
@shayhoweModular HTML & CSS
WATCH SPECIFICITY• Be explicit
• Keep specificity low
• Never use IDs or !important
• Avoid nested selectors (#main .spotlight strong span)
@shayhoweModular HTML & CSS
WATCH SPECIFICITYBad#primary #main div.gallery { text-‐transform: uppercase;}#primary #main div.gallery figure.media { background: #ccc;}
@shayhoweModular HTML & CSS
WATCH SPECIFICITYGood.gallery { text-‐transform: uppercase;}.gallery-‐media { background: #ccc;}
Parade of the Black Sea Fleet by Ivan Aivazovsky
@shayhoweModular HTML & CSS
MAINTAINABILITYCode must be...
• Organized
• Modular
• Performant
@shayhoweModular HTML & CSS
METHODOLOGIESOOCSS
• Object-Oriented CSSFrom Nicole Sullivan – oocss.org
SMACSS
• Scalable and Modular Architecture for CSSFrom Jonathan Snook – smacss.com
@shayhoweModular HTML & CSS
GROUNDWORK
@shayhoweModular HTML & CSS
REUSE CODE• Do not duplicate code
• Remove old code
• Defer loading subsequent styles
@shayhoweModular HTML & CSS
REUSE CODEBad.news { background: #eee; color: #666;}.social { background: #eee; color: #666;}
@shayhoweModular HTML & CSS
REUSE CODEGood.news,.social { background: #eee; color: #666;}
Better.feat-‐box { background: #eee; color: #666;}
@shayhoweModular HTML & CSS
USE CLASSES• Write understandable class names
• Avoid unnecessary nesting
• Use same strength specificity
@shayhoweModular HTML & CSS
USE CLASSESBad.feat-‐box .callout .pr { font-‐size: 12px;}.feat-‐box .callout .pr .un { color: #39f;}
@shayhoweModular HTML & CSS
USE CLASSESGood.feat-‐box .price { font-‐size: 12px;}.feat-‐box .unit { color: #39f;}
@shayhoweModular HTML & CSS
USE CLASSESBad.btn.large { font-‐size: 24px; padding: 15px 30px;}
<div class="btn large">...</div>
@shayhoweModular HTML & CSS
USE CLASSESGood.btn-‐large { font-‐size: 24px; padding: 15px 30px;}
<div class="btn-‐large">...</div>
@shayhoweModular HTML & CSS
ASSEMBLINGLAYOUT
@shayhoweModular 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
@shayhoweModular HTML & CSS
ABSTRACT STRUCTUREBad.news { background: #eee; color: #666; margin: 0 10px; width: 400px;}
<div class="news">...</div>
@shayhoweModular HTML & CSS
ABSTRACT STRUCTUREGood.grid-‐4 { margin: 0 10px; width: 400px;}.feat-‐box { background: #eee; color: #666;}
<div class="grid-‐4 feat-‐box">...</div>
@shayhoweModular HTML & CSS
TRANSPARENTIZE ELEMENTS• Stylize elements to be transparent
• Keep visual properties apart from layout properties
@shayhoweModular HTML & CSS
TRANSPARENTIZE ELEMENTSBad.pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px;}
<ul class="pagination">...</ul>
@shayhoweModular HTML & CSS
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>
@shayhoweModular HTML & CSS
CREATE ADAPTABLE LAYOUTS• Height and width should be flexible
• Height should extend with content
• Width should extend with a grid
@shayhoweModular HTML & CSS
CREATE ADAPTABLE LAYOUTSBad#main { float: left; margin: 0 10px; width: 620px;}#aside { float: left; margin: 0 10px; width: 300px;}
@shayhoweModular HTML & CSS
CREATE ADAPTABLE LAYOUTSGood.grid-‐4,.grid-‐8 { float: left; margin: 0 10px;}.grid-‐4 { width: 300px;}.grid-‐8 { width: 620px;}
@shayhoweModular HTML & CSS
ASSEMBLING LAYOUT
IN PRACTICEhttp://bit.ly/modular-html-css
@shayhoweModular HTML & CSS
ACCOMMODATINGCONTENT
@shayhoweModular HTML & CSS
SEPARATE CONTENT• Separate content from container
• Stylize content regardless of container
@shayhoweModular HTML & CSS
SEPARATE CONTENTBad.alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px;}
<div class="alert">...</div>
@shayhoweModular HTML & CSS
SEPARATE CONTENTGood.alert { border-‐radius: 10px; padding: 10px 20px;}.alert-‐error { background: #f2dede; color: #b94a48;}
<div class="alert alert-‐error">...</div>
@shayhoweModular HTML & CSS
AVOID PARENT DEPENDENCY• Remove parent container dependency
• Decouple CSS from HTML
• Create components to be used anywhere
@shayhoweModular HTML & CSS
AVOID PARENT DEPENDENCYBad.feat-‐box { background: #eee;}article .feat-‐box { background: #fff;}
<article> <div class="feat-‐box">...</div></article>
@shayhoweModular HTML & CSS
AVOID PARENT DEPENDENCYGood.feat-‐box { background: #eee;}.feat-‐box-‐alt { background: #fff;}
<article> <div class="feat-‐box-‐alt">...</div></article>
@shayhoweModular HTML & CSS
FAVOR SEMANTICS• Allow elements to adapt
• Uses individual classes to extend modules
@shayhoweModular HTML & CSS
FAVOR SEMANTICSBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}
<div class="feat-‐box"> <h2>...</h2></div>
@shayhoweModular HTML & CSS
FAVOR SEMANTICSGood.feat-‐subhead { color: #f60; font: 18px Helvetica, sans-‐serif;}
<div class="feat-‐box"> <h2 class="feat-‐subhead">...</h2></div>
@shayhoweModular HTML & CSS
ACCOMMODATING CONTENT
IN PRACTICEhttp://bit.ly/modular-html-css
@shayhoweModular HTML & CSS
ONWARD
Ships on the Roadstead by Willem van de Velde the Younger
@shayhoweModular HTML & CSS
APPROACH• Stop thinking about pages
• Start thinking about components
• Take visual inventory
@shayhoweModular HTML & CSS
THEMES• Decouple HTML and CSS
• Separate presentation from layout
• Separate content from container
• Extend elements with classes
@shayhoweModular HTML & CSS
OUTCOMES• Maintainability!
• Reusable code, less duplication
• Flexibility and extensibility
• Improved standards
@shayhoweModular HTML & CSS
WHAT’S NEXTBuild a styleguide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed
@shayhoweModular HTML & CSS
THANK YOU!Questions?
@shayhowehttp://learn.shayhowe.com