Modular HTML & CSS Workshop

Slide 1

Slide 1 text

TACTICAL HTML & CSS Shay Howe @shayhowe learn.shayhowe.com MODULAR HTML & CSS WORKSHOP

Slide 2

Slide 2 text

@shayhowe Modular HTML & CSS Shay Howe @shayhowe learn.shayhowe.com

Slide 3

Slide 3 text

@shayhowe Modular HTML & CSS 1. The Problem 2. Groundwork 3. Assembling Layout 4. Accommodating Content 5. Onward OUR SCHEDULE

Slide 4

Slide 4 text

@shayhowe Modular HTML & CSS THE PROBLEM

Slide 5

Slide 5 text

The Gust by Willem van de Velde the Younger

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@shayhowe 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

Slide 13

Slide 13 text

@shayhowe 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

Slide 14

Slide 14 text

@shayhowe Modular HTML & CSS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Parade of the Black Sea Fleet by Ivan Aivazovsky

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@shayhowe 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

Slide 21

Slide 21 text

@shayhowe Modular HTML & CSS GROUNDWORK

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

...

Slide 29

Slide 29 text

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

...

Slide 30

Slide 30 text

@shayhowe Modular HTML & CSS ASSEMBLING LAYOUT

Slide 31

Slide 31 text

@shayhowe 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

Slide 32

Slide 32 text

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

...

Slide 33

Slide 33 text

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

...

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

...

Slide 36

Slide 36 text

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

...

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

@shayhowe Modular HTML & CSS ACCOMMODATING CONTENT

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

@shayhowe Modular HTML & CSS SEPARATE CONTENT Bad .alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px; }

...

Slide 44

Slide 44 text

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

...

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY Bad .feat-‐box { background: #eee; } article .feat-‐box { background: #fff; }

...

Slide 47

Slide 47 text

@shayhowe Modular HTML & CSS AVOID PARENT DEPENDENCY Good .feat-‐box { background: #eee; } .feat-‐box-‐alt { background: #fff; }

...

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

...

Slide 50

Slide 50 text

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

...

Slide 51

Slide 51 text

@shayhowe Modular HTML & CSS ACCOMMODATING CONTENT IN PRACTICE http://bit.ly/modular-html-css

Slide 52

Slide 52 text

@shayhowe Modular HTML & CSS ONWARD

Slide 53

Slide 53 text

Ships on the Roadstead by Willem van de Velde the Younger

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

@shayhowe Modular HTML & CSS THANK YOU! Questions? @shayhowe http://learn.shayhowe.com