Slide 1
Slide 1 text
Building a
CSS Foundation
Jake Smith
CONFOO 2013
Slide 3
Slide 3 text
http://bit.ly/VuP5d5
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Constant Evaluation
&
Self-Loathing
Slide 6
Slide 6 text
Specificity Kills
Slide 7
Slide 7 text
Specificity is hard, especially
to pronounce!
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Do NOT carpet bomb your
elements
Slide 10
Slide 10 text
/**
* You wouldn't do this
*/
div {
color: #ccc;
padding: 1em 2em;
}
Slide 11
Slide 11 text
/**
* You wouldn't do this
*/
div {
color: #ccc;
padding: 1em 2em;
}
/**
* So why would you do this
*/
header {
color: #ccc;
padding: 1em 2em;
}
Slide 12
Slide 12 text
/**
* Better solutions
*/
#header {}
.header {}
body > header {}
/**
* You wouldn't do this
*/
div {
color: #ccc;
padding: 1em 2em;
}
/**
* So why would you do this
*/
header {
color: #ccc;
padding: 1em 2em;
}
Slide 13
Slide 13 text
/**
* Well...
*/
#header ul {
color: #ccc;
padding: 1em 2em;
}
Slide 14
Slide 14 text
/**
* Well...
*/
#header ul {
color: #ccc;
padding: 1em 2em;
}
/**
* What??
*/
#sidebar div {
border-bottom: 1px;
}
Slide 15
Slide 15 text
/**
* WAT
*/
.content p {
font-size: 14px;
}
/**
* Well...
*/
#header ul {
color: #ccc;
padding: 1em 2em;
}
/**
* What??
*/
#sidebar div {
border-bottom: 1px;
}
Slide 16
Slide 16 text
CSS is easy, naming stuff is
hard!
Slide 17
Slide 17 text
#sidebar div {}
GUESS THAT ELEMENT!
Slide 18
Slide 18 text
#sidebar div {}
GUESS THAT ELEMENT!
.promo-box {}
Slide 19
Slide 19 text
#sidebar div {}
header ul {}
GUESS THAT ELEMENT!
.promo-box {}
Slide 20
Slide 20 text
#sidebar div {}
header ul {}
GUESS THAT ELEMENT!
.promo-box {}
.nav-main {}
Slide 21
Slide 21 text
#sidebar div {}
h2 span {}
header ul {}
GUESS THAT ELEMENT!
.promo-box {}
.nav-main {}
Slide 22
Slide 22 text
#sidebar div {}
h2 span {}
header ul {}
GUESS THAT ELEMENT!
.promo-box {}
.nav-main {}
.tagline {}
Slide 23
Slide 23 text
Clear Intent is the Goal
Slide 24
Slide 24 text
Do NOT over qualify your
declaration
Slide 25
Slide 25 text
/**
* Stop strangling your fellow
developer
*/
ul.nav-primary {}
div#header {}
body.two-col {}
Slide 26
Slide 26 text
Do NOT let your CSS dictate
your HTML structure
Slide 27
Slide 27 text
/**
* FREEDOM!
*/
.nav-primary {}
#header {}
.two-col {}
Slide 28
Slide 28 text
Let’s make specificity easy
Slide 29
Slide 29 text
Avoid using IDs*
Slide 30
Slide 30 text
Modular Development
Slide 31
Slide 31 text
Stop developing pages and
start developing systems
Slide 32
Slide 32 text
History (Brief) of OOCSS
Slide 33
Slide 33 text
.media {
display: block;
@extend .cf;
}
.media-img {
float: left;
margin-right: $base-spacing-unit;
}
/**
* Reversed image location (right instead of left).
*/
.media-img--rev {
float: right;
margin-left: $base-spacing-unit;
}
.media-img img,
.media-img--rev img {
display: block;
}
.media-body {
overflow: hidden;
}
.media .media--rev
https://github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_media.scss
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Module/Object
Slide 36
Slide 36 text
Separate structure from style
Slide 37
Slide 37 text
/**
* Base Button Object
* @tags ^button
* @format
* Register
* Register
*
*/
.btn {
border: none;
display: inline-block;
margin: 0;
padding: 0.5em;
cursor: pointer;
font: inherit;
line-height: 1;
}
.btn,
.btn:hover {
text-decoration: none;
}
Slide 39
Slide 39 text
/**
* Button Sizes
* @tags ^button
* @extends btn
*/
.btn-small { font-size: 1.25em; }
.btn-medium { font-size: 1.5em; }
.btn-large { font-size: 2em; }
.btn-xlarge { font-size: 2.5em; }
/**
* Primary Button Style
* @tags ^button
* @extends btn
*/
.btn-primary {
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
background: #403731;
color: #fff;
font-family: $fontButtonFamily;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}
.btn-primary:hover {
box-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
Slide 42
Slide 42 text
btn
btn-primary
Sub-module
module element btn-large
Sub-module
sizing
styling
Slide 43
Slide 43 text
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 44
Slide 44 text
.featured-posts
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 45
Slide 45 text
.featured-posts
.recent-posts
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 46
Slide 46 text
.featured-posts
.recent-posts
.active-
members
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 47
Slide 47 text
/* ============================================================
Media Object (OOCSS)
============================================================ */
.media {
*zoom: 1;
}
.media > .media-image {
display: block;
float: left;
margin-right: 10px;
}
.l-grid .media-image {
float: none;
margin: 0;
}
.media > .media-body {
color: #ccc;
font-size: 0.8em;
padding: 5px 10px;
}
Slide 48
Slide 48 text
/* ============================================================
Media List
============================================================ */
/**
* List of media objects
* @tags ^list ^media
*/
.media-list {
margin-left: 0;
list-style: none;
}
.media-list > .media-item,
.media-list > li {
clear: both;
display: block;
margin: 0.75em 0;
background: #fff;
}
.l-grid .media-item,
.l-grid li {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
border: 3px solid #fff;
display: inline-block;
margin: 0.75em;
}
/**
* Featured Articles Media List
* @tags ^list ^media
* @extends media-list
*/
.media-featured-list > .media-item,
.media-featured-list > li {
width: 150px;
}
Slide 49
Slide 49 text
Travel
Slide 50
Slide 50 text
media
media-list
media-
featured-
list
l-grid
Sub-module
layout element
module element
Slide 51
Slide 51 text
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 52
Slide 52 text
.l-grid .media-list
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 53
Slide 53 text
.l-grid .media-list
.media-list
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 54
Slide 54 text
.l-grid .media-list
.media-list
.l-grid .media-
list
http://themeforest.net/item/onecommunity-buddypress-theme/3713046?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=Diabolique
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Context MUST NOT modify
your modules
Slide 57
Slide 57 text
Code Standard/Styles
Slide 58
Slide 58 text
Formatting
Slide 59
Slide 59 text
.btn-small { font-size: 1.25em; }
.btn-primary {
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
background: #403731;
color: #fff;
font-family: $fontButtonFamily;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
Slide 60
Slide 60 text
.btn-small { font-size: 1.25em; }
.btn-primary {
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
background: #403731;
color: #fff;
font-family: $fontButtonFamily;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
hyphen separated class
names
Slide 61
Slide 61 text
.btn-small { font-size: 1.25em; }
.btn-primary {
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
background: #403731;
color: #fff;
font-family: $fontButtonFamily;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
hyphen separated class
names
space between property
and value
Slide 62
Slide 62 text
.btn-small { font-size: 1.25em; }
.btn-primary {
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
background: #403731;
color: #fff;
font-family: $fontButtonFamily;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
hyphen separated class
names
space between property
and value
inline only allowed
when one property is
present
Slide 63
Slide 63 text
.btn-small { font-size: 1.25em; }
.btn-primary {
box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
background: #403731;
color: #fff;
font-family: $fontButtonFamily;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
hyphen separated class
names
space between property
and value
one selector per line
inline only allowed
when one property is
present
Slide 64
Slide 64 text
Declaration Order
Slide 65
Slide 65 text
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
left: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
/* Other (styling and typography) */
background: #000;
color: #fff;
font-family: sans-serif;
font-size: 16px;
text-align: right;
/* CSS Preprocessor mixins */
.lessMixin();
@include sassMixin();
}
Slide 66
Slide 66 text
Documentation
Slide 68
Slide 68 text
Predictability
&
Consistency
Slide 69
Slide 69 text
Readability
&
Maintainability
Slide 70
Slide 70 text
https://github.com/necolas/idiomatic-css
Slide 71
Slide 71 text
http://make.wordpress.org/core/handbook/coding-standards/css/
Slide 72
Slide 72 text
Organization and Structure
Slide 73
Slide 73 text
Abstraction and modularity
is great.....until it’s not.....
Slide 74
Slide 74 text
If it takes more than 5 seconds to figure
out where to put something, you’ve gone
too far
Slide 75
Slide 75 text
Tools and Resources
Slide 76
Slide 76 text
http://csslint.net/
Slide 77
Slide 77 text
https://github.com/squizlabs/PHP_CodeSniffer
Slide 78
Slide 78 text
1
Naming is hard, so
be clear with your
styles
In general, instead of carpet bombing
your elements, shoot to kill; target them
specifically and explicitly. Make sure your
selector intent is accurate and targeted.
- Harry Roberts, @csswizardry
http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/
Slide 79
Slide 79 text
2
Don’t let your styles
define your HTML
Structure
Creates complexity
and limits modularity
Slide 80
Slide 80 text
3
Small modules are
easier to maintain
Don’t let context
change your module
Slide 81
Slide 81 text
4
Consistency and
Predictability
always win out
This is why people go on about readability,
clarity, simplicity, and explicitness; because
they are all fundamentally characteristics
of a maintainable code base.
- Andy Hume, @andyhume
http://www.youtube.com/watch?v=ZpFdyfs03Ug
Slide 82
Slide 82 text
5
Document for
tomorrow’s
developer
This Could Be You
Slide 83
Slide 83 text
http://bit.ly/VuP5d5
Links and Resources
Slide 84
Slide 84 text
Questions? Concerns?
Complaints?
Slide 85
Slide 85 text
Thanks for Listening
jakefolio
http://jakefolio.com
[email protected]
Please Rate Me!
https://joind.in/7990