OOCSS sand SMACSS

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 {
}

/* via classes */

.cls1.subcls1 {
…
}

6

.btns {
background: url(„sprite.png‟);
}

.btns.submit {
background-position: -40px 0;
}

7

class Button {
protected $_background;
}

class ButtonSubmit extends Button {
protected $_bg_position_x = 40,
$_bg_position_y = 0;
}

8


0 0 0 0 0 0 0 0

9


!important
inline #ID .class tag inline #ID .class tag
0 0 0 0 0 0 0 0

10


!important
0 0 0 0 0 0 0 0

Bad Practice

11


!important
0 0 0 0 0 0 0 0

Bad Practice

12


!important
0 0 0 0 0 0 0 0

Don‟t use #ID in OOCSS and SMACSS
Use #ID for JavaScript

13


!important
0 0 0 0 0 0 0 0

Don‟t use tags in OOCSS and SMACSS
Tags - unpredictable

14

.btns { .class
1
background: url(„sprite.png‟);
}

.btns.submit { .class
2
background-position: -40px 0;
}
+ cascade

15

.cls1 {
}

/* via media queries */

@media … {
…
}

16

Init: 960gs, 12units

17

Init: 960gs, 12units
.unit-1 { width: 60px; margin: 10px; }

18

Init: 960gs, 12units Final: 1280gs, 16units

19

.unit-1 { width: 60px; margin: 10px; } .unit-1 { width: 60px; margin: 10px; }

20


21

.has-grid-16-units { display: block; }

22

.unit-13 { width: 0; margin: 10px; } .unit-13 { width: 1020px; margin: 10px; }
.has-grid-16-units { display: none; } .has-grid-16-units { display: block; }

23

.is-big-screen { display: none; } .is-big-screen { display: block; }

24

.is-big-screen { display: none; } .is-big-screen { display: block; }

25

Polymorphism
.cls1 {
}

.cls1 {
width: 60%; color: blue;
}

26

Polymorphism
#content .cls1 {
}

#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 States
with Namespaces

36

States
.box { … }
.box-content { … }

.has-notifications { … }
.has-notifications .box { … }

37

Combine with
LESS/Sass

39

Categories in SMACSS

40

Categories in SMACSS
Base Rules
Layout Rules
Module Rules
State Rules
Theme Rules

41

You can create own
categories

42

Useful Resources
http://oocss.org/
http://smacss.com/
http://cssdoc.net/

+ Google
+ Wikipedia
+ Slideshare

+ Books on CSS

43

What are Your Questions
and Feedback?

44

Thank you

Stanislav Usoltsev

45

OOCSS sand SMACSS

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

OOCSS sand SMACSS