OOCSS sand SMACSS1. OOCSS
&
SMACSS
Stanislav Usoltsev
2. Overview
• Encapsulation
• Inheritance
• Polymorphism
• Mixins
• Aggregation
• Composition
• Namespaces
• States
2
6. Inheritance :: Type #1
.cls1 {
width: 50%; color: red;
}
/* via classes */
.cls1.subcls1 {
…
}
6
7. Inheritance :: Type #1
.btns {
background: url(„sprite.png‟);
}
.btns.submit {
background-position: -40px 0;
}
7
8. Inheritance :: Type #1
class Button {
protected $_background;
}
class ButtonSubmit extends Button {
protected $_bg_position_x = 40,
$_bg_position_y = 0;
}
8
10. Inheritance :: Type #1
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
10
11. Inheritance :: Type #1
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Bad Practice
11
12. Inheritance :: Type #1
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Bad Practice
12
13. Inheritance :: Type #1
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Don‟t use #ID in OOCSS and SMACSS
Use #ID for JavaScript
13
14. Inheritance :: Type #1
!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0
Don‟t use tags in OOCSS and SMACSS
Tags - unpredictable
14
15. Inheritance :: Type #1
.btns { .class
1
background: url(„sprite.png‟);
}
.btns.submit { .class
2
background-position: -40px 0;
}
+ cascade
15
16. Inheritance :: Type #2
.cls1 {
width: 50%; color: red;
}
/* via media queries */
@media … {
…
}
16
18. Inheritance :: Type #2
Init: 960gs, 12units
.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; }
18
19. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.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; }
19
20. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; } .unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; } .unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; } .unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; } .unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; } .unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; } .unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; } .unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; } .unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; } .unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; } .unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; } .unit-12 { width: 940px; margin: 10px; }
20
21. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; } .unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; } .unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; } .unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; } .unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; } .unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; } .unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; } .unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; } .unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; } .unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; } .unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; 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; }
21
22. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; } .unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; } .unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; } .unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; } .unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; } .unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; } .unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; } .unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; } .unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; } .unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; } .unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; 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; }
22
23. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; } .unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; } .unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; } .unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; } .unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; } .unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; } .unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; } .unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; } .unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; } .unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; } .unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; } .unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 0; margin: 10px; } .unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 0; margin: 10px; } .unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 0; margin: 10px; } .unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 0; margin: 10px; } .unit-16 { width: 1260px; margin: 10px; }
.has-grid-16-units { display: none; } .has-grid-16-units { display: block; }
23
24. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; } .unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; } .unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; } .unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; } .unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; } .unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; } .unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; } .unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; } .unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; } .unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; } .unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; } .unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 0; margin: 10px; } .unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 0; margin: 10px; } .unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 0; margin: 10px; } .unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 0; margin: 10px; } .unit-16 { width: 1260px; margin: 10px; }
.is-big-screen { display: none; } .is-big-screen { display: block; }
24
25. Inheritance :: Type #2
Init: 960gs, 12units Final: 1280gs, 16units
.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }
.unit-2 { width: 140px; margin: 10px; } .unit-2 { width: 140px; margin: 10px; }
.unit-3 { width: 220px; margin: 10px; } .unit-3 { width: 220px; margin: 10px; }
.unit-4 { width: 300px; margin: 10px; } .unit-4 { width: 300px; margin: 10px; }
.unit-5 { width: 380px; margin: 10px; } .unit-5 { width: 380px; margin: 10px; }
.unit-6 { width: 460px; margin: 10px; } .unit-6 { width: 460px; margin: 10px; }
.unit-7 { width: 540px; margin: 10px; } .unit-7 { width: 540px; margin: 10px; }
.unit-8 { width: 620px; margin: 10px; } .unit-8 { width: 620px; margin: 10px; }
.unit-9 { width: 700px; margin: 10px; } .unit-9 { width: 700px; margin: 10px; }
.unit-10 { width: 780px; margin: 10px; } .unit-10 { width: 780px; margin: 10px; }
.unit-11 { width: 860px; margin: 10px; } .unit-11 { width: 860px; margin: 10px; }
.unit-12 { width: 940px; margin: 10px; } .unit-12 { width: 940px; margin: 10px; }
.unit-13 { width: 0; margin: 10px; } .unit-13 { width: 1020px; margin: 10px; }
.unit-14 { width: 0; margin: 10px; } .unit-14 { width: 1100px; margin: 10px; }
.unit-15 { width: 0; margin: 10px; } .unit-15 { width: 1180px; margin: 10px; }
.unit-16 { width: 0; margin: 10px; } .unit-16 { width: 1260px; margin: 10px; }
.is-big-screen { display: none; } .is-big-screen { display: block; }
25
28. 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
29. Mixins
.btn {
/* default value of width,
e.g. auto or inherit */
}
.small {
width: 100px;
}
.big {
width: 700px;
}
29
35. States
.is-state {…}
.has-something { … }
.is-hidden {…}
.has-notifications { … }
35
37. States
.box { … }
.box-content { … }
.has-notifications { … }
.has-notifications .box { … }
37