CSS For grownups: maturing best practises

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

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

BEGINNING IN THE Saturday, 10 March 2012

Web Standards movement Saturday, 10 March 2012

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

<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

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

The power of CSS Saturday, 10 March 2012

http://www.csszengarden.com

Separation of concerns

Web Standards Obsession Saturday, 10 March 2012

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

.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

.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

Saturday, 10 March 2012

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

Network Effects

Managing complexity

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

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

Network Effects

Managing complexity

.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

Saturday, 10 March 2012

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

With great power...

Saturday, 10 March 2012

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

Constraints are good

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

#side-bar a {

color : green

!important ; } Saturday, 10 March 2012

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

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

Optimize for change Saturday, 10 March 2012

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

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

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

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

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

EXAMPLES Saturday, 10 March 2012

Layers of CSS HTML DOCUMENT DOCUMENT Saturday, 10 March 2012

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

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

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

.green {

color : green ; } Saturday, 10 March 2012

.green {

color : red ; } Saturday, 10 March 2012

.promo-box {

color : red ;

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

.promo-box {

color : red ;

background : black ; } .promo-box h3 {

font-size : 1.2em ;

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

.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

.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

!! headings Saturday, 10 March 2012

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

.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

.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

!! lists Saturday, 10 March 2012

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

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

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

<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

<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

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

!! module variants Saturday, 10 March 2012

.promo-box {

color : red ;

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

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

.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

.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

!! page specific styles Saturday, 10 March 2012

.promo-box {

color : red ;

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

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

.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

.promo-box {

color : red ;

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

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

!! media queries Saturday, 10 March 2012

.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

Fontdeck forms Saturday, 10 March 2012

https://fontdeck.com/register

.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

.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

.promo-box input[type=text] {

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

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

.promo-box input[type=text] {

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

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

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

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

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

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

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

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

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

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

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

e

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

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

!! presentational class names Saturday, 10 March 2012

Surgical layout helpers .margin-top {

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

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

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

.gutter-left {

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

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

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

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

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

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

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

STYLEGUIDES DOCS ! Saturday, 10 March 2012

Saturday, 10 March 2012

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

Saturday, 10 March 2012

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

Documenting base styles

Saturday, 10 March 2012

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

Saturday, 10 March 2012

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

Saturday, 10 March 2012

Documenting layout styles

Saturday, 10 March 2012

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

Module library

Saturday, 10 March 2012

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

Module library

The benefits Saturday, 10 March 2012

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

Thank-you! cc Saturday, 10 March 2012

http://lanyrd.com/spmqc @andyhume

Creative Commons Licensed Attribution, Non-Commercial, Share Alike