Slide 1
Slide 1 text
GROWNUPS
Andy Hume
MATURING BEST PRACTISES
SXSW interactive, 2012
CSS FOR
Saturday, 10 March 2012
Slide 2
Slide 2 text
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
https://twitter.com/slightlylate/status/141681624134844416
Saturday, 10 March 2012
Slide 3
Slide 3 text
BEGINNING
IN THE
Saturday, 10 March 2012
Slide 4
Slide 4 text
Web Standards movement
http://www.flickr.com/photos/mariachily/4149054961/
Saturday, 10 March 2012
Slide 5
Slide 5 text
Error
font>
tr>
Saturday, 10 March 2012
Slide 6
Slide 6 text
Error
Saturday, 10 March 2012Slide 7
Slide 7 text
http://www.csszengarden.com
Separation of concerns
The power of CSS
Saturday, 10 March 2012
Slide 8
Slide 8 text
Web Standards Obsession
Saturday, 10 March 2012
Slide 9
Slide 9 text
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
https://twitter.com/malarkey/status/70161540254416896
Saturday, 10 March 2012
Slide 10
Slide 10 text
.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
Slide 11 text
.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
Slide 12 text
http://www.flickr.com/photos/dippy_duck/2685596185/
Network Effects
Managing complexity
Saturday, 10 March 2012
Slide 13
Slide 13 text
http://www.flickr.com/photos/dippy_duck/2685596185/
Network Effects
Managing complexity
.product-list li a {
}
Saturday, 10 March 2012
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
http://www.flickr.com/photos/dippy_duck/2685596185/
With great power...
Saturday, 10 March 2012
Slide 16
Slide 16 text
http://www.flickr.com/photos/banspy/3843960604/
Constraints are good
Saturday, 10 March 2012
Slide 17
Slide 17 text
http://www.flickr.com/photos/banspy/3843960604/
Constraints are good
Nobody is really smart enough to program
compu rs.
Steve McConnell
Code Complete 2, Microsoft Press, 2004
Saturday, 10 March 2012
Slide 18
Slide 18 text
#side-bar a {
color: green !important;
}
Saturday, 10 March 2012
Slide 19
Slide 19 text
http://www.flickr.com/photos/banspy/3843960604/
Constraints are good
Nobody is really smart enough to s le web
pages.
Andy Hume
SXSWi, 2012
Saturday, 10 March 2012
Slide 20
Slide 20 text
‘Code quality’
CORRECTNESS
PERFORMANCE
REUSABILITY
TESTABILITY
RELIABILITY
EXTENSIBILITY
WEB 2.0 COMPLIANT
Saturday, 10 March 2012
Slide 21
Slide 21 text
http://www.flickr.com/photos/anandham/4499539060/
Optimize for change
Saturday, 10 March 2012
Slide 22
Slide 22 text
261 declarations of Facebook
blue
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
261 declarations of Facebook blue
Saturday, 10 March 2012
Slide 23
Slide 23 text
Very few people (only professional designers, it
seems) wri s le sheets longer than a
hundred lines.
Bert Bos, 2008
http://www.w3.org/People/Bos/CSS-variables
Saturday, 10 March 2012
Slide 24
Slide 24 text
Sass
http://sass-lang.com
LESS
http://lesscss.org/
Stylus
http://learnboost.github.com/stylus/
Saturday, 10 March 2012
Slide 25
Slide 25 text
OOCSS
http://oocss.org
SMACSS
http://smacss.com
CSS Lint
http://csslint.net
Saturday, 10 March 2012
Slide 26
Slide 26 text
EXAMPLES
Saturday, 10 March 2012
Slide 27
Slide 27 text
Layers of CSS
HTML DOCUMENT
DOCUMENT
Saturday, 10 March 2012
Slide 28
Slide 28 text
Layers of CSS
BASE STYLES
HTML DOCUMENT
DOCUMENT BASE
Saturday, 10 March 2012
Slide 29
Slide 29 text
Layers of CSS
BASE STYLES
MODULE STYLES
HTML DOCUMENT
DOCUMENT BASE MODULE
Saturday, 10 March 2012
Slide 30
Slide 30 text
Layers of CSS
BASE STYLES
LAYOUT STYLES
MODULE STYLES
HTML DOCUMENT
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 31
Slide 31 text
.green {
color: green;
}
Saturday, 10 March 2012
Slide 32
Slide 32 text
.green {
color: red;
}
Saturday, 10 March 2012
Slide 33
Slide 33 text
.promo-box {
color: red;
background: black;
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 34
Slide 34 text
.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
Slide 35 text
.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
Slide 36 text
.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
Slide 37 text
!! headings
Saturday, 10 March 2012
Slide 38
Slide 38 text
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
Slide 39 text
.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
Slide 40 text
.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
Slide 41 text
!! lists
Saturday, 10 March 2012
Slide 42
Slide 42 text
ul.product-list li {
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 43
Slide 43 text
.product-list li {
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 44
Slide 44 text
.product-item {
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 45
Slide 45 text
- Prod 1
- Prod 2
- Prod 3
- Prod 4
- Prod 5
Slide 46
Slide 46 text
Prod 1
...Prod 1
Details about product
Prod 1
Details about product
Saturday, 10 March 2012Slide 47
Slide 47 text
.product-list li,
.product-item {
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 48
Slide 48 text
!! module variants
Saturday, 10 March 2012
Slide 49
Slide 49 text
.promo-box {
color: red;
background: black;
}
#sidebar .promo-box {
background: white;
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 50
Slide 50 text
.promo-box {
color: red;
background: black;
}
.promo-box-light {
background: white;
}
div>
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 51
Slide 51 text
.promo-box {
color: red;
background: black;
}
.promo-box--light {
background: white;
}
div>
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 52
Slide 52 text
!! page specific styles
Saturday, 10 March 2012
Slide 53
Slide 53 text
.promo-box {
color: red;
background: black;
}
.product-page .promo-box {
color: green;
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 54
Slide 54 text
.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
Slide 55 text
.promo-box {
color: red;
background: black;
}
.promo-box .promo-box-eco {
color: green;
}
DOCUMENT BASE MODULE LAYOUT
Saturday, 10 March 2012
Slide 56
Slide 56 text
!! media queries
Saturday, 10 March 2012
Slide 57
Slide 57 text
.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
Slide 58 text
https://fontdeck.com/register
Fontdeck forms
Saturday, 10 March 2012
Slide 59
Slide 59 text
.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
Slide 60 text
.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
Slide 61 text
.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
Slide 62 text
.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
Slide 63 text
Selector Queries
https://github.com/ahume/selector-queries
Saturday, 10 March 2012
Content here
Slide 64
Slide 64 text
Selector Queries
https://github.com/ahume/selector-queries
Saturday, 10 March 2012
Content here
Slide 65
Slide 65 text
Selector Queries
https://github.com/ahume/selector-queries
Saturday, 10 March 2012
Content here
Slide 66
Slide 66 text
Selector Queries
https://github.com/ahume/selector-queries
Saturday, 10 March 2012
Content here
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
!! presentational class names
Saturday, 10 March 2012
Slide 69
Slide 69 text
Surgical layout helpers
.margin-top {
margin-top: 8px;
}
.margin-bottom {
margin-bottom: 8px;
}
Saturday, 10 March 2012
Slide 70
Slide 70 text
Module content
Surgical layout helpers
Saturday, 10 March 2012
Slide 71
Slide 71 text
.gutter-left {
padding-left: 8px;
}
.gutter-right {
padding-right: 8px;
}
Surgical layout helpers
Saturday, 10 March 2012
Slide 72
Slide 72 text
Module content
Slide 73
Slide 73 text
!! extra non-semantic elements
Saturday, 10 March 2012
Slide 74
Slide 74 text
Background icons
23 Comments p> .icon { background-image: url(icons.png); } .icon-comment { background-position: 0 -30px; } Saturday, 10 March 2012
Slide 75
Slide 75 text
Background icons
23 Comments
.icon { background-image: url(icons.png); } .icon-comment { background-position: 0 -30px; } Saturday, 10 March 2012Slide 77
Slide 77 text
STYLEGUIDES
DOCS
Saturday, 10 March 2012
Slide 78
Slide 78 text
BBC Global Experience Language
http://www.bbc.co.uk/gel
Saturday, 10 March 2012
Slide 79
Slide 79 text
http://twitter.github.com/bootstrap/
Documenting base styles
Saturday, 10 March 2012
Slide 80
Slide 80 text
Documenting base styles
http://paulrobertlloyd.com/about/styleguide/
Saturday, 10 March 2012
Slide 81
Slide 81 text
Documenting base styles
http://paulrobertlloyd.com/about/styleguide/
Saturday, 10 March 2012
Slide 82
Slide 82 text
Documenting layout styles
Saturday, 10 March 2012
Slide 83
Slide 83 text
http://www.flickr.com/photos/banspy/3843960604/
Module library
Saturday, 10 March 2012
Slide 84
Slide 84 text
http://www.flickr.com/photos/banspy/3843960604/
Module library
Saturday, 10 March 2012
Slide 85
Slide 85 text
The benefits
Saturday, 10 March 2012
Slide 86
Slide 86 text
Client-side developers
http://goo.gl/xq76e
Software developers
http://goo.gl/Fj9DP
Saturday, 10 March 2012
Slide 87
Slide 87 text
Thank-you!
http://lanyrd.com/spmqc
@andyhume
Creative Commons Licensed
Attribution, Non-Commercial, Share Alike
cc
Saturday, 10 March 2012