oocss sand smacss
DESCRIPTION
IdeasTRANSCRIPT
OOCSS&
SMACSS
Stanislav Usoltsev
Overview
• Encapsulation• Inheritance• Polymorphism• Mixins• Aggregation• Composition• Namespaces• States
2
Encapsulation
<div style=“width: 50%; color: red;”>Inline Styles
</div>
3
Encapsulation
<div style=“width: 50%; color: red;”>Inline Styles
</div><div class=“cls1”>
Use .class</div>
4
Inheritance
.cls1 {width: 50%; color: red;
}
.subcls1 {/* new properties */
}
5
Inheritance :: Type #1
.cls1 {width: 50%; color: red;
}
/* via classes */
.cls1.subcls1 {…
}6
Inheritance :: Type #1
.btns {background: url(‘sprite.png’);
}
.btns.submit {background-position: -40px 0;
}
7
Inheritance :: Type #1
class Button {protected $_background;
}
class ButtonSubmit extends Button {protected $_bg_position_x = 40,
$_bg_position_y = 0;}
8
Inheritance :: Type #1
9
0 0 0 0 0 0 0 0
Inheritance :: Type #1
10
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Inheritance :: Type #1
11
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Bad Practice
Inheritance :: Type #1
12
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Bad Practice
Inheritance :: Type #1
13
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Don’t use #ID in OOCSS and SMACSSUse #ID for JavaScript
Inheritance :: Type #1
14
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Don’t use tags in OOCSS and SMACSSTags - unpredictable
Inheritance :: Type #1
.btns {background: url(‘sprite.png’);
}
.btns.submit {background-position: -40px 0;
}
15
.class
1
.class
2
+ cascade
Inheritance :: Type #2
.cls1 {width: 50%; color: red;
}
/* via media queries */
@media … {…
}16
Inheritance :: Type #2
17
Init: 960gs, 12units
Inheritance :: Type #2
18
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
Init: 960gs, 12units
Inheritance :: Type #2
19
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
Init: 960gs, 12units Final: 1280gs, 16units
Inheritance :: Type #2
20
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
Init: 960gs, 12units Final: 1280gs, 16units
Inheritance :: Type #2
21
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 1260px; margin: 10px; }
Init: 960gs, 12units Final: 1280gs, 16units
Inheritance :: Type #2
22
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 1260px; margin: 10px; }
.has-grid-16-units { display: block; }
Init: 960gs, 12units Final: 1280gs, 16units
Inheritance :: Type #2
23
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 0; margin: 10px; }
.unit-14 { width: 0; margin: 10px; }
.unit-15 { width: 0; margin: 10px; }
.unit-16 { width: 0; margin: 10px; }
.has-grid-16-units { display: none; }
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 1260px; margin: 10px; }
.has-grid-16-units { display: block; }
Init: 960gs, 12units Final: 1280gs, 16units
Inheritance :: Type #2
24
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 0; margin: 10px; }
.unit-14 { width: 0; margin: 10px; }
.unit-15 { width: 0; margin: 10px; }
.unit-16 { width: 0; margin: 10px; }
.is-big-screen { display: none; }
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 1260px; margin: 10px; }
.is-big-screen { display: block; }
Init: 960gs, 12units Final: 1280gs, 16units
Inheritance :: Type #2
25
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 0; margin: 10px; }
.unit-14 { width: 0; margin: 10px; }
.unit-15 { width: 0; margin: 10px; }
.unit-16 { width: 0; margin: 10px; }
.is-big-screen { display: none; }
.unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 1260px; margin: 10px; }
.is-big-screen { display: block; }
Init: 960gs, 12units Final: 1280gs, 16units
Polymorphism
.cls1 {width: 50%; color: red;
}
.cls1 {width: 60%; color: blue;
}
26
Polymorphism
#content .cls1 {width: 50%; color: red;
}
#sidebar .cls1 {width: 60%; color: blue;
}
27
Polymorphism
…public __construct(Section $section) {
$this->_section = $section;}public function print() {
$this->_section->cls1->render();}
..
$dummy = new Dummy(new Content());$dummy->render();$dummy = new Dummy(new Sidebar());$dummy->render();
28
Mixins
.btn {/* default value of width, e.g. auto or inherit */
}
.small {width: 100px;
}
.big {width: 700px;
}
29
Mixins
<div class=“btn small”>Small</div>
<div class=“btn big”>Big</div>
30
Aggregation
.box {…
}
.box .header {…
}
.box > .footer {…
}
31
Aggregation is Polymorphic
32
Composition
.box {…
}
.box-header {…
}
.box-footer {…
}
33
Namespaces
.page-home { … }
.page-account { … }
.page-home .box { … }
.page-account .box { … }
34
States
.is-state { … }
.has-something { … }
.is-hidden { … }
.has-notifications { … }
35
Combine Stateswith Namespaces
36
States
.box { … }
.box-content { … }
.has-notifications { … }
.has-notifications .box { … }
37
UseLESS/Sass
38
Combine withLESS/Sass
39
Categories in SMACSS
40
Categories in SMACSS
Base RulesLayout RulesModule RulesState RulesTheme Rules
41
You can create own categories
42
Useful Resources
http://oocss.org/http://smacss.com/http://cssdoc.net/
+ Google+ Wikipedia+ Slideshare
+ Books on CSS43
What are Your Questions and Feedback?
44
Thank you
Stanislav Usoltsev
45