45
OOCSS & SMACSS Stanislav Usoltsev

OOCSS sand SMACSS

Tags:

Embed Size (px)

DESCRIPTION

Ideas

Citation preview

Page 1: OOCSS sand SMACSS

OOCSS&

SMACSS

Stanislav Usoltsev

Page 2: OOCSS sand SMACSS

Overview

• Encapsulation• Inheritance• Polymorphism• Mixins• Aggregation• Composition• Namespaces• States

2

Page 3: OOCSS sand SMACSS

Encapsulation

<div style=“width: 50%; color: red;”>Inline Styles

</div>

3

Page 4: OOCSS sand SMACSS

Encapsulation

<div style=“width: 50%; color: red;”>Inline Styles

</div><div class=“cls1”>

Use .class</div>

4

Page 5: OOCSS sand SMACSS

Inheritance

.cls1 {width: 50%; color: red;

}

.subcls1 {/* new properties */

}

5

Page 6: OOCSS sand SMACSS

Inheritance :: Type #1

.cls1 {width: 50%; color: red;

}

/* via classes */

.cls1.subcls1 {…

}6

Page 7: OOCSS sand SMACSS

Inheritance :: Type #1

.btns {background: url(‘sprite.png’);

}

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

}

7

Page 8: OOCSS sand SMACSS

Inheritance :: Type #1

class Button {protected $_background;

}

class ButtonSubmit extends Button {protected $_bg_position_x = 40,

$_bg_position_y = 0;}

8

Page 9: OOCSS sand SMACSS

Inheritance :: Type #1

9

0 0 0 0 0 0 0 0

Page 10: OOCSS sand SMACSS

Inheritance :: Type #1

10

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Page 11: OOCSS sand SMACSS

Inheritance :: Type #1

11

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Bad Practice

Page 12: OOCSS sand SMACSS

Inheritance :: Type #1

12

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Bad Practice

Page 13: OOCSS sand SMACSS

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

Page 14: OOCSS sand SMACSS

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

Page 15: OOCSS sand SMACSS

Inheritance :: Type #1

.btns {background: url(‘sprite.png’);

}

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

}

15

.class

1

.class

2

+ cascade

Page 16: OOCSS sand SMACSS

Inheritance :: Type #2

.cls1 {width: 50%; color: red;

}

/* via media queries */

@media … {…

}16

Page 17: OOCSS sand SMACSS

Inheritance :: Type #2

17

Init: 960gs, 12units

Page 18: OOCSS sand SMACSS

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

Page 19: OOCSS sand SMACSS

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

Page 20: OOCSS sand SMACSS

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

Page 21: OOCSS sand SMACSS

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

Page 22: OOCSS sand SMACSS

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

Page 23: OOCSS sand SMACSS

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

Page 24: OOCSS sand SMACSS

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

Page 25: OOCSS sand SMACSS

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

Page 26: OOCSS sand SMACSS

Polymorphism

.cls1 {width: 50%; color: red;

}

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

}

26

Page 27: OOCSS sand SMACSS

Polymorphism

#content .cls1 {width: 50%; color: red;

}

#sidebar .cls1 {width: 60%; color: blue;

}

27

Page 28: OOCSS sand SMACSS

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

Page 29: OOCSS sand SMACSS

Mixins

.btn {/* default value of width, e.g. auto or inherit */

}

.small {width: 100px;

}

.big {width: 700px;

}

29

Page 30: OOCSS sand SMACSS

Mixins

<div class=“btn small”>Small</div>

<div class=“btn big”>Big</div>

30

Page 31: OOCSS sand SMACSS

Aggregation

.box {…

}

.box .header {…

}

.box > .footer {…

}

31

Page 32: OOCSS sand SMACSS

Aggregation is Polymorphic

32

Page 33: OOCSS sand SMACSS

Composition

.box {…

}

.box-header {…

}

.box-footer {…

}

33

Page 34: OOCSS sand SMACSS

Namespaces

.page-home { … }

.page-account { … }

.page-home .box { … }

.page-account .box { … }

34

Page 35: OOCSS sand SMACSS

States

.is-state { … }

.has-something { … }

.is-hidden { … }

.has-notifications { … }

35

Page 36: OOCSS sand SMACSS

Combine Stateswith Namespaces

36

Page 37: OOCSS sand SMACSS

States

.box { … }

.box-content { … }

.has-notifications { … }

.has-notifications .box { … }

37

Page 38: OOCSS sand SMACSS

UseLESS/Sass

38

Page 39: OOCSS sand SMACSS

Combine withLESS/Sass

39

Page 40: OOCSS sand SMACSS

Categories in SMACSS

40

Page 41: OOCSS sand SMACSS

Categories in SMACSS

Base RulesLayout RulesModule RulesState RulesTheme Rules

41

Page 42: OOCSS sand SMACSS

You can create own categories

42

Page 43: OOCSS sand SMACSS

Useful Resources

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

+ Google+ Wikipedia+ Slideshare

+ Books on CSS43

Page 44: OOCSS sand SMACSS

What are Your Questions and Feedback?

44

Page 45: OOCSS sand SMACSS

Thank you

Stanislav Usoltsev

45


OOCSS and SMACSS Case Study

OOCSS and SMACSS Case Study

Engineering
OOCSS and SMACSS

OOCSS and SMACSS

Engineering
OOCSS - Object Oriented CSS

OOCSS - Object Oriented CSS

Technology
FABRIC SAND 20 FABRIC SAND 27 FABRIC SAND 07 FABRIC …€¦ · fabric sand 12 fabric sand 22 fabric sand 42 fabric sand 28 fabric sand 38 fabric sand 48 fabric sand 18 fabric sand

FABRIC SAND 20 FABRIC SAND 27 FABRIC SAND 07 FABRIC …€¦ · fabric sand 12 fabric sand 22 fabric sand 42 fabric sand 28 fabric sand 38 fabric sand 48 fabric sand 18 fabric sand

Documents
Arquitetura CSS - SMACSS + OOCS + BEM

Arquitetura CSS - SMACSS + OOCS + BEM

Internet
Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*

Web Dev in 2019Methods to keep it tidy OOCSS: Object-oriented CSS BEM: Block-Element-Modifier ACSS: Atomic CSS SMACSS: Scalable & modular architecture A sample for BEM.product { /*...*

Documents
Tytuł oryginału: Less Web Development Essentials, Second ... · Metodologie OOCSS, SMACSS oraz BEM 59 Podsumowanie 60 Rozdziaï 2. Stosowanie zmiennych i wstawek 63 Stosowanie komentarzy

Tytuł oryginału: Less Web Development Essentials, Second ... · Metodologie OOCSS, SMACSS oraz BEM 59 Podsumowanie 60 Rozdziaï 2. Stosowanie zmiennych i wstawek 63 Stosowanie komentarzy

Documents
7Masters CSS | SMACSS, por Rafael Lyra

7Masters CSS | SMACSS, por Rafael Lyra

Technology
Build a better UI component library with Styled System · BEM (Block, Element, Modifier) SMACSS (Scalable and Modular Architecture for CSS) CSS Modules CSS in JS. OOCSS (Object-Oriented

Build a better UI component library with Styled System · BEM (Block, Element, Modifier) SMACSS (Scalable and Modular Architecture for CSS) CSS Modules CSS in JS. OOCSS (Object-Oriented

Documents
Review the OOCSS

Review the OOCSS

Technology
Sand sand sand

Sand sand sand

Documents
SMACSS Your Sass Up

SMACSS Your Sass Up

Technology
Smacss e-css-faz-bem

Smacss e-css-faz-bem

Software
Smacss and bem

Smacss and bem

Technology
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS

Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS

Engineering
Leveling up CSS with SMACSS and BEM

Leveling up CSS with SMACSS and BEM

Technology
Implementing OOCSS Methodologies

Implementing OOCSS Methodologies

Technology
Hoja de Vida - Developer · Vue - Git - SMACSS - OOCSS - BEM. Diseño de interfaces Más que se vea “bonito” un diseño debe ser funcional, presto atención a los detalles para

Hoja de Vida - Developer · Vue - Git - SMACSS - OOCSS - BEM. Diseño de interfaces Más que se vea “bonito” un diseño debe ser funcional, presto atención a los detalles para

Documents
OOCSS, SMACSS or BEM, what is the question

OOCSS, SMACSS or BEM, what is the question

Technology
CSS Class Naming and BEM - paneru.co.uk · BEM ( Block, Element, Modifier ) SMACSS ( Scalable and Modular Architecture for CSS ) OOCSS ( Object Oriented CSS ) Developed by the team

CSS Class Naming and BEM - paneru.co.uk · BEM ( Block, Element, Modifier ) SMACSS ( Scalable and Modular Architecture for CSS ) OOCSS ( Object Oriented CSS ) Developed by the team

Documents
OOCSS - 以sass開發為例

OOCSS - 以sass開發為例

Internet
CSS Architecture with OOCSS, SMACSS, BEM

CSS Architecture with OOCSS, SMACSS, BEM

Design
MT Meetup 2 - OOCSS

MT Meetup 2 - OOCSS

Technology
CSS Moderno. AS DIVERSAS FORMAS DO · 13/06/2019  · SMACSS OOCSS BEM Pré-processadores: SASS LESS Stylus Pós-processadores: PurgeCSS Stylelint PostCSS Bibliotecas: CSS Modules

CSS Moderno. AS DIVERSAS FORMAS DO · 13/06/2019  · SMACSS OOCSS BEM Pré-processadores: SASS LESS Stylus Pós-processadores: PurgeCSS Stylelint PostCSS Bibliotecas: CSS Modules

Documents
OOCSS, SMACSS or BEM?

OOCSS, SMACSS or BEM?

Engineering
CSS com SASS e SMACSS faz BEM

CSS com SASS e SMACSS faz BEM

Internet
OOCSS – JURIY ARTYUKH for Tech Hangout - Tech Hangout #20 - 2013.04.03

OOCSS – JURIY ARTYUKH for Tech Hangout - Tech Hangout #20 - 2013.04.03

Education
Drupal 8 themes with SASS, SMACSS and kittens

Drupal 8 themes with SASS, SMACSS and kittens

Internet
PSD to Theme: The SMACSS Way

PSD to Theme: The SMACSS Way

Technology
SAND, SAND ADDITIVES and SAND PROPERTİESmimoza.marmara.edu.tr/~altan.turkeli/files/cpt-2-sand_sand.pdf · SAND, SAND ADDITIVES, SAND ... optimized sand for the casting being produced

SAND, SAND ADDITIVES and SAND PROPERTİESmimoza.marmara.edu.tr/~altan.turkeli/files/cpt-2-sand_sand.pdf · SAND, SAND ADDITIVES, SAND ... optimized sand for the casting being produced

Documents