Slide 1
Slide 1 text
YOUR CSS
IS A MESS
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
1 person.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
4 designers.
Slide 8
Slide 8 text
5 developers.
Slide 9
Slide 9 text
1 team.
Slide 10
Slide 10 text
1 project.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
30 designers.
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
200 engineers.
Slide 15
Slide 15 text
5 prototypers.
Slide 16
Slide 16 text
multiple teams.
Slide 17
Slide 17 text
multiple projects.
Slide 18
Slide 18 text
CSS is easy.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
li { }
Slide 22
Slide 22 text
oat: left
padding: 3px 50px;
margin: 0;
Slide 23
Slide 23 text
.block { display:block !important; }
.inline { display:inline !important; }
.hide { display:none !important; }
.s-none { margin:0 !important; }
.s { margin:10px !important; }
.ss { margin:20px !important; }
.sr { margin-right:10px !important; }
.p-none { padding:0 !important; }
.p { padding:10px !important; }
.pp { padding:20px !important; }
.pt { padding-top:10px !important; }
.w-auto { width:auto !important; }
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
.layout_1_2 #blogList .pageitem .statusBar {}
.layout_1_2 #blogList .pageitem .statusBar .status,
#blogList .pageitem .statusBar .status .status1 { }
.layout_1_2 #blogList .pageitem .statusBar .status { }
.layout_1_2 #blogList .pageitem .statusBar .status .status1 { }
.layout_1_2 #blogList .pageitem .statusBar .status .status1 a { }
.layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
Slide 26
Slide 26 text
.layout_1_2 #blogList .pageitem .statusBar {}
.layout_1_2 #blogList .pageitem .statusBar .status,
#blogList .pageitem .statusBar .status .status1 { }
.layout_1_2 #blogList .pageitem .statusBar .status { }
.layout_1_2 #blogList .pageitem .statusBar .status .status1 { }
.layout_1_2 #blogList .pageitem .statusBar .status .status1 a { }
.layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
Slide 27
Slide 27 text
#comments .comment .meta .authorname {}
#comments .comment .meta .commentnumber a {}
Slide 28
Slide 28 text
#comments .comment .meta .authorname {}
#comments .comment .meta .commentnumber a {}
Slide 29
Slide 29 text
#nav-header ul li {
float: left;
...
}
#nav-content ul li {
float: left;
...
}
Slide 30
Slide 30 text
/* ======== SECTION: STYLE VARIABLES ======== */
$icon_sprite:url('icon-sprite.png') no-repeat;
$black_header_height:40px;
$content_header_height:66px;
$container_width:994px;
$sidebar_width:158px;
$page_width: $container_width - $sidebar_width - 20px;
$outer_page_width: $container_width - $sidebar_width;
/* ======== END SECTION: STYLE VARIABLES ======== */
/* ======== SECTION: 4.0. SCSS MIXINS ======== */
/* 4.2. Transitions */
@mixin transition($properties:all,$timing:0.3s,$transition:ease-in-out,$delay:0.0s) { -o-
transition: $properties $timing $transition $delay; -webkit-transition: $properties $timi
$transition $delay; -moz-transition: $properties $timing $transition $delay; }
/* 4.3. Box Shadows */
@mixin box-shadow($s1) { -webkit-box-shadow:$s1; -moz-box-shadow:$s1; box-shadow:$s1; }
@mixin double-box-shadow($s1,$s2:0 0 0 rgba(0,0,0,0)) { -webkit-box-shadow:$s1,$s2; -moz-
shadow:$s1,$s2; box-shadow:$s1,$s2; }
/* 4.4. Rounded Corners */
@mixin rounded($px:3px) { -webkit-border-radius:$px; -moz-border-radius:$px; border-radiu
$px; }
/* 4.5. Border Radius */
@mixin border-radius($tr,$tl,$br,$bl) { -moz-border-radius:$tr $tl $br $bl; -webkit-borde
radius:$tr $tl $br $bl; border-radius:$tr $tl $br $bl; }
/* 4.6. Gradients */
@mixin gradient($color1, $color2) { background-color:$color1; background-image:-o-linear-
gradient($color2, $color1); background-image: -webkit-gradient(linear,left bottom,left
top,color-stop(0, $color1),color-stop(1, $color2)); background-image: -moz-linear-
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Scalable and
Modular
Architecture
for CSS
Slide 34
Slide 34 text
SMACSS
Slide 35
Slide 35 text
3
Considerations
Slide 36
Slide 36 text
3
Categorization
Naming Convention
Decouple HTML/CSS
Slide 37
Slide 37 text
1
Categorization
Slide 38
Slide 38 text
Categorization
• Base
• Layout
• Module
• State
• Theme
Slide 39
Slide 39 text
Base
Slide 40
Slide 40 text
html {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3 {
margin: 1em 0;
}
Slide 41
Slide 41 text
Layout
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Sidebar
Content
Header
Footer
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Sidebar Content
Header
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Module
Slide 49
Slide 49 text
Customized List
Button
Tabs
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Sub-modules
Slide 58
Slide 58 text
Large
Search
Dark
Small
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Sub-components
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
State
Slide 65
Slide 65 text
Active State Default State
Disabled State Default State
Slide 66
Slide 66 text
Theme
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Have your CSS (and HTML)...
Do one thing
and one thing only
Slide 71
Slide 71 text
http://snk.ms/1r
The Single
Responsibility
Theory
Slide 72
Slide 72 text
...
Slide 73
Slide 73 text
.grid {}
.col { float:left; }
.col:nth-child(2n) { clear:left; }
.module { display:inline-block; }
Slide 74
Slide 74 text
...
Slide 75
Slide 75 text
- ...
Slide 76
Slide 76 text
.grid {}
.grid > li { float:left; }
.grid > li:nth-child(2n) { clear:left; }
.module { display:inline-block; }
Slide 77
Slide 77 text
-
...
Slide 78
Slide 78 text
- {{item}}
Slide 79
Slide 79 text
...
Slide 80
Slide 80 text
Categorization is
about Isolation
Slide 81
Slide 81 text
2
Naming Convention
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
Naming Convention
Naming convention clari es intent
Slide 84
Slide 84 text
Use Class over ID
Don’t use a grenade to dig a hole
when a shovel will do.
Slide 85
Slide 85 text
Specificity
Inline ID Class
(pseudo-classes
and attribute
selectors)
Element
(pseudo-
elements)
style="..." #article
.article
:hover
[attr=val]
a
: rst-child
Slide 86
Slide 86 text
Specificity
Inline ID Class
(pseudo-classes
and attribute
selectors)
Element
(pseudo-
elements)
style="..." #article
.article
:hover
[attr=val]
a
: rst-child
Slide 88
Slide 88 text
No content
Slide 90
Slide 90 text
Specificity Buster!
!important
Slide 91
Slide 91 text
Specificity Buster!
!important
Slide 94
Slide 94 text
.btn {}
.btn-large {}
.btn-small {}
.btn-default {}
.btn-search {}
Slide 95
Slide 95 text
.btn {}
.is-btn-active {}
.is-btn-disabled {}
Slide 96
Slide 96 text
.theme-header {}
.theme-border {}
.theme-background {}
Slide 97
Slide 97 text
.text-plus1 {}
.text-minus1 {}
Slide 98
Slide 98 text
.modulename
.modulename-submodule
.modulename-subcomponent
No hyphens
Always a root node
No hyphens
No difference from submodule
Slide 99
Slide 99 text
.module-name
.module-name--submodule
.module-name__subcomponent
allows for hyphens
Always a root node
Alternatives
underscores
hyphens
Slide 100
Slide 100 text
.moduleName
.moduleName-subModule
.moduleName--subComponent
camelCase
Alternatives
double hyphen
single hyphen
Slide 101
Slide 101 text
Naming
Convention
• Pick a system that works for you and
your team
• Be consistent
• Consider:
• Root node
• Sub-modules
• Sub-components
Slide 102
Slide 102 text
3
Decoupling
CSS from HTML
Slide 103
Slide 103 text
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
display: block;
padding: 5px 10px;
background-color: blue;
}
Slide 106
Slide 106 text
.nav ul {
margin: 0;
padding:0;
list-style:none;
}
.nav li li {
float: none;
}
.nav li li a {
padding: 2px;
background-color: red;
}
Slide 107
Slide 107 text
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav > li {
float: left;
}
.nav > li > a {
display: block;
padding: 5px 10px;
background-color: blue;
}
Slide 108
Slide 108 text
.menu {
margin: 0;
padding: 0;
list-style: none
}
.menu > li > a {
display: block;
padding: 2px;
background-color: red;
}
Slide 109
Slide 109 text
Please.
Use child selectors
Slide 111
Slide 111 text
.box {
border: 1px solid #333;
}
.box h2 {
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #333;
background-color: #CCC;
}
.box ul {
margin: 10px;
}
Slide 113
Slide 113 text
.box {
border: 1px solid #333;
}
.box h2 {
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #333;
background-color: #CCC;
}
.box ul, .box p, .box div {
margin: 10px;
}
Slide 114
Slide 114 text
.box {
border: 1px solid #333;
}
.box h2 {
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #333;
background-color: #CCC;
}
.box-body {
margin: 10px;
}
Slide 116
Slide 116 text
when the HTML can’t
or won’t be predictable
Apply a class
Slide 117
Slide 117 text
What does it mean?
Slide 118
Slide 118 text
Shift your thinking
Slide 119
Slide 119 text
Don’t code CSS for the page.
Code it for
the system.
Slide 120
Slide 120 text
State-based Design
Slide 121
Slide 121 text
State-based Design
• A layout or module style
• Sub-modules
• JavaScript-driven states
• Pseudo-class states
• Media query states
Slide 122
Slide 122 text
CSS Panic
http://snk.ms/15
Slide 123
Slide 123 text
.enemys {
z-index:3;
position:absolute;
top:0px;
left:0;
width:49px;
height:93px;
display:block;
-webkit-appearance: button;
-moz-appearance: button;
background-position:0px 0px;
background-repeat:no-repeat;
-webkit-animation-iteration-count:infinite
cursor:pointer;
opacity:0.9;
border:none;
Slide 124
Slide 124 text
.enemys {
z-index:3;
position:absolute;
top:0px;
left:0;
width:49px;
height:93px;
display:block;
-webkit-appearance: button;
-moz-appearance: button;
background-position:0px 0px;
background-repeat:no-repeat;
-webkit-animation-iteration-count:infinite
cursor:pointer;
opacity:0.9;
border:none;
Slide 125
Slide 125 text
.enemys:checked{
overflow:hidden;
-webkit-animation-name: none;
-webkit-pointer-events: none;
pointer-events: none;
opacity:0;
}
Slide 126
Slide 126 text
.enemys:checked{
overflow:hidden;
-webkit-animation-name: none;
-webkit-pointer-events: none;
pointer-events: none;
opacity:0;
}
Slide 127
Slide 127 text
3
Categorization
Naming Convention
Decouple HTML/CSS