A presentation at SXSW Interactive 2012 in in Austin, TX, USA by Andy Hume
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/
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
.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 2012Selector Queries https://github.com/ahume/selector-queries
<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012Selector Queries https://github.com/ahume/selector-queries
<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012Selector Queries https://github.com/ahume/selector-queries
<div data-squery= "max-width:400px=narrow" > <p> Content here </p> </div> Saturday, 10 March 2012Selector 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
.gutter-left {
padding-left : 8px ; } .gutter-right {
padding-right : 8px ; } 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
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
In the early days of CSS the web industry cut its teeth on blogs and small personal sites. Much of the methodology still considered best-practise today originated from the experiences of developers working alone, often on a single small style sheet, with few of the constraints that come from working with large distributed teams on large continually changing web projects.
The mechanics of CSS are relatively simple. But creating large maintainable systems with it is still an unsolved problem. For larger sites, CSS is a difficult and complex component of the codebase to manage and maintain. It's difficult to document patterns, and it's difficult for developers unfamiliar with the code to contribute safely.
How can we do better? What are the CSS best practises that are letting us down and that we must shake off? How can we take a more precise, structured, engineering-driven approach to writing CSS to keep it bug-free, performant, and most importantly, maintainable?
for free. You
can too.