CSS For grownups: maturing best practises

A presentation at SXSW Interactive 2012 in March 2012 in Austin, TX, USA by Andy Hume

Slide 1

GROWNUPS Andy Hume MATURING BEST PRACTISES CSS FOR Saturday, 10 March 2012 SXSW interactive, 2012

Slide 2

Front-enders shouldn't be a ! aid to say they "program". CSS is cons " aint programming and not respec

ng JS in 2011 is just iggnant [sic] . Alex Russell Saturday, 10 March 2012 https://twitter.com/slightlylate/status/141681624134844416

Slide 3

BEGINNING IN THE Saturday, 10 March 2012

Slide 4

Web Standards movement Saturday, 10 March 2012

http://www.flickr.com/photos/mariachily/4149054961/

Slide 5

<table> <tr><td><img src= "spacer.gif" ><img src= "spacer.gif" ></td></tr> <tr><td><font face= "arial,sans-serif" size= "4" color= "red" ><b> Error </ font><br><br></b></td></tr> <tr><td><img src= "spacer.gif" ></td></ tr> </table> Saturday, 10 March 2012

Slide 6

<p class= "error" > Error </p> Saturday, 10 March 2012

Slide 7

The power of CSS Saturday, 10 March 2012

http://www.csszengarden.com

Separation of concerns

Slide 8

Web Standards Obsession Saturday, 10 March 2012

Slide 9

Every

me you need to add a class or id for a s $ le hook, put a pound/dollar in a jar. #malarkeyspro

ps Andy Clarke, 2011 Saturday, 10 March 2012 https://twitter.com/malarkey/status/70161540254416896

Slide 10

.social li:nth-child(1) {

background-image : url (twitter.png); } .social li:nth-child(2) {

background-image : url (facebook.png); } .social li:nth-child(3) {

background-image : url (linkedin.png); } Saturday, 10 March 2012

Slide 11

.social .twitter {

background-image : url (twitter.png); } .social .facebook {

background-image : url (facebook.png); } .social .linkedin {

background-image : url (linkedin.png); } Saturday, 10 March 2012

Slide 12

Saturday, 10 March 2012

http://www.flickr.com/photos/dippy_duck/2685596185/

Network Effects

Managing complexity

Slide 13

.product-list li a { } Saturday, 10 March 2012

http://www.flickr.com/photos/dippy_duck/2685596185/

Network Effects

Managing complexity

Slide 14

.product-list li a { } .product-list li a { display : block ; padding : 0.5em 0.23em ; color : #54FE87 ; background-color : #CCC ; text-shadow : #6374AB 20px -12px 2px ; } Saturday, 10 March 2012

http://www.flickr.com/photos/dippy_duck/2685596185/

Network Effects

Managing complexity

Slide 15

Saturday, 10 March 2012

http://www.flickr.com/photos/dippy_duck/2685596185/

With great power...

Slide 16

Saturday, 10 March 2012

http://www.flickr.com/photos/banspy/3843960604/

Constraints are good

Slide 17

Nobody is really smart enough to program compu % rs. Steve McConnell Saturday, 10 March 2012

http://www.flickr.com/photos/banspy/3843960604/

Constraints are good

Code Complete 2, Microsoft Press, 2004

Slide 18

#side-bar a {

color : green

!important ; } Saturday, 10 March 2012

Slide 19

Nobody is really smart enough to s $ le web pages. Andy Hume Saturday, 10 March 2012

http://www.flickr.com/photos/banspy/3843960604/

Constraints are good

SXSWi, 2012

Slide 20

‘Code quality’ CORRECTNESS PERFORMANCE REUSABILITY TESTABILITY RELIABILITY EXTENSIBILITY WEB 2.0 COMPLIANT Saturday, 10 March 2012

Slide 21

Optimize for change Saturday, 10 March 2012

http://www.flickr.com/photos/anandham/4499539060/

Slide 22

261 declarations of Facebook blue Saturday, 10 March 2012 http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

261 declarations of Facebook blue

Slide 23

Very few people (only professional designers, it seems) wri % s $ le sheets longer than a hundred lines. Bert Bos, 2008 Saturday, 10 March 2012 http://www.w3.org/People/Bos/CSS-variables

Slide 24

Sass http://sass-lang.com LESS http://lesscss.org / Stylus http://learnboost.github.com/stylus/ Saturday, 10 March 2012

Slide 25

OOCSS http://oocss.org SMACSS http://smacss.com CSS Lint http://csslint.net Saturday, 10 March 2012

Slide 26

EXAMPLES Saturday, 10 March 2012

Slide 27

Layers of CSS HTML DOCUMENT DOCUMENT Saturday, 10 March 2012

Slide 28

Layers of CSS BASE STYLES HTML DOCUMENT DOCUMENT BASE Saturday, 10 March 2012

Slide 29

Layers of CSS BASE STYLES MODULE STYLES HTML DOCUMENT DOCUMENT BASE MODULE Saturday, 10 March 2012

Slide 30

Layers of CSS BASE STYLES LAYOUT STYLES MODULE STYLES HTML DOCUMENT DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 31

.green {

color : green ; } Saturday, 10 March 2012

Slide 32

.green {

color : red ; } Saturday, 10 March 2012

Slide 33

.promo-box {

color : red ;

background : black ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 34

.promo-box {

color : red ;

background : black ; } .promo-box h3 {

font-size : 1.2em ;

text-transform : uppercase ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 35

.promo-box {

color : red ;

background : black ; } .promo-box h3, .promo-box h4 {

font-size : 1.2em ;

text-transform : uppercase ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 36

.promo-box {

color : red ;

background : black ; } .promo-box .promo-box-h {

font-size : 1.2em ;

text-transform : uppercase ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 37

!! headings Saturday, 10 March 2012

Slide 38

h1 { font-size : 3em ; } h2 { font-size : 2.3em ; } h3 { font-size : 2.1em ; } h4 { font-size : 1.8em ; } h5 { font-size : 1.3em ; } h6 { font-size : 1.1em ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 39

.h1 { font-size : 3em ; } .h2 { font-size : 2.3em ; } .h3 { font-size : 2.1em ; } .h4 { font-size : 1.8em ; } .h5 { font-size : 1.3em ; } .h6 { font-size : 1.1em ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 40

.h-headline { font-size : 3em ; } .h-subheadline { font-size : 2.3em ; } .h-byline { font-size : 2.1em ; } .h-standfirst { font-size : 1.8em ; } .h-related { font-size : 1.3em ; } .h-promo { font-size : 1.1em ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 41

!! lists Saturday, 10 March 2012

Slide 42

ul.product-list li { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 43

.product-list li { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 44

.product-item { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 45

<ul> <li class= "product-item" > Prod 1 </li> <li class= "product-item" > Prod 2 </li> <li class= "product-item" > Prod 3 </li> <li class= "product-item" > Prod 4 </li> <li class= "product-item" > Prod 5 </li> </ul> Saturday, 10 March 2012

Slide 46

<p class= "product-item" > Prod 1 </p> ... <div class= "product-item" > <h4 class= "product-item-h" > Prod 1 </h4> <p> Details about product </p> </div> ... <section class= "product-item" > <h2 class= "product-item-h" > Prod 1 </h2> <p> Details about product </p> </section> Saturday, 10 March 2012

Slide 47

.product-list li, .product-item { } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 48

!! module variants Saturday, 10 March 2012

Slide 49

.promo-box {

color : red ;

background : black ; } #sidebar .promo-box {

background : white ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 50

.promo-box {

color : red ;

background : black ; } .promo-box-light {

background : white ; }

<div class= "promo-box promo-box-light" ></ div> DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 51

.promo-box {

color : red ;

background : black ; } .promo-box--light {

background : white ; }

<div class= "promo-box promo-box--light" ></ div> DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 52

!! page specific styles Saturday, 10 March 2012

Slide 53

.promo-box {

color : red ;

background : black ; } .product-page .promo-box {

color : green ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 54

.promo-box {

color : red ;

background : black ; } .product-page .promo-box, .home-page .promo-box, .about-page .promo-box, .tag-page .promo-box {

color : green ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 55

.promo-box {

color : red ;

background : black ; } .promo-box .promo-box-eco {

color : green ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 56

!! media queries Saturday, 10 March 2012

Slide 57

.promo-box input[type=text] {

display : block ; } @media screen and (min-width: 20em) { .promo-box input[type=text] {

display : inline ; } } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 58

Fontdeck forms Saturday, 10 March 2012

https://fontdeck.com/register

Slide 59

.promo-box input[type=text] {

display : block ; } .promo-box @ (min-width: 20em) { input[type=text] {

display : inline ; } } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 60

.promo-box input[type=text] {

display : block ; } .promo-box @ (min-width: 20em) { input[type=text] {

display : inline ; } } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 61

.promo-box input[type=text] {

display : inline ; } .promo-box.narrow input[type=text] {

display : block ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 62

.promo-box input[type=text] {

display : inline ; } .promo-box.narrow input[type=text] {

display : block ; } DOCUMENT BASE MODULE LAYOUT Saturday, 10 March 2012

Slide 63

Selector Queries https://github.com/ahume/selector-queries

<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012

Slide 64

Selector Queries https://github.com/ahume/selector-queries

<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012

Slide 65

Selector Queries https://github.com/ahume/selector-queries

<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012

Slide 66

Selector Queries https://github.com/ahume/selector-queries

<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012

Slide 67

Selector Queries https://github.com/ahume/selector-queries var

= document .querySelectorAll( ".promo-box" ); SelectorQueries. add (e, "min-width" ,

"30em" , "wide" ); Saturday, 10 March 2012

Slide 68

!! presentational class names Saturday, 10 March 2012

Slide 69

Surgical layout helpers .margin-top {

margin-top : 8px ; } .margin-bottom {

margin-bottom : 8px ; } Saturday, 10 March 2012

Slide 70

<div class= "promo-box margin-top" > Module content </div> Surgical layout helpers Saturday, 10 March 2012

Slide 71

.gutter-left {

padding-left : 8px ; } .gutter-right {

padding-right : 8px ; } Surgical layout helpers Saturday, 10 March 2012

Slide 72

<div class= "gutter-left gutter-right" > <div class= "promo-box" > Module content </div> </div> Surgical layout helpers Saturday, 10 March 2012

Slide 73

!! extra non-semantic elements Saturday, 10 March 2012

Slide 74

Background icons

<p class= "icon icon-comment" > 23 Comments </ p> .icon {

background-image : url (icons.png); } .icon-comment {

background-position : 0 -30px ; } Saturday, 10 March 2012

Slide 75

Background icons

<p><i class= "icon icon-comment" ></i> 23 Comments </p> .icon {

background-image : url (icons.png); } .icon-comment {

background-position : 0 -30px ; } Saturday, 10 March 2012

Slide 76

<p><i class= "icon icon-comment" ></i> 23 Comments </p> <a><i class= "icon icon-comment" ></ i> Comment </a> Saturday, 10 March 2012

Slide 77

STYLEGUIDES DOCS ! Saturday, 10 March 2012

Slide 78

Saturday, 10 March 2012

BBC Global Experience Language http://www.bbc.co.uk/gel

Slide 79

Saturday, 10 March 2012

http://twitter.github.com/bootstrap/

Documenting base styles

Slide 80

Saturday, 10 March 2012

Documenting base styles http://paulrobertlloyd.com/about/styleguide/

Slide 81

Saturday, 10 March 2012

Documenting base styles http://paulrobertlloyd.com/about/styleguide/

Slide 82

Saturday, 10 March 2012

Documenting layout styles

Slide 83

Saturday, 10 March 2012

http://www.flickr.com/photos/banspy/3843960604/

Module library

Slide 84

Saturday, 10 March 2012

http://www.flickr.com/photos/banspy/3843960604/

Module library

Slide 85

The benefits Saturday, 10 March 2012

Slide 86

Client-side developers http://goo.gl/xq76e Software developers http://goo.gl/Fj9DP Saturday, 10 March 2012

Slide 87

Thank-you! cc Saturday, 10 March 2012

http://lanyrd.com/spmqc @andyhume

Creative Commons Licensed Attribution, Non-Commercial, Share Alike