Your SlideShare is downloading. ×
0
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
OOCSS sand SMACSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

OOCSS sand SMACSS

797

Published on

Ideas

Ideas

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
797
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. OOCSS & SMACSSStanislav Usoltsev
  • 2. Overview• Encapsulation• Inheritance• Polymorphism• Mixins• Aggregation• Composition• Namespaces• States 2
  • 3. Encapsulation<div style=“width: 50%; color: red;”> Inline Styles</div> 3
  • 4. Encapsulation<div style=“width: 50%; color: red;”> Inline Styles</div><div class=“cls1”> Use .class</div> 4
  • 5. Inheritance.cls1 { width: 50%; color: red;}.subcls1 { /* new properties */} 5
  • 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 #1class Button { protected $_background;}class ButtonSubmit extends Button { protected $_bg_position_x = 40, $_bg_position_y = 0;} 8
  • 9. Inheritance :: Type #10 0 0 0 0 0 0 0 9
  • 10. Inheritance :: Type #1 !importantinline #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 0Bad Practice 11
  • 12. Inheritance :: Type #1 !important inline #ID .class tag inline #ID .class tag 0 0 0 0 0 0 0 0Bad Practice 12
  • 13. Inheritance :: Type #1 !important inline #ID .class tag inline #ID .class tag 0 0 0 0 0 0 0 0Don‟t use #ID in OOCSS and SMACSSUse #ID for JavaScript 13
  • 14. Inheritance :: Type #1 !important inline #ID .class tag inline #ID .class tag 0 0 0 0 0 0 0 0Don‟t use tags in OOCSS and SMACSSTags - 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
  • 17. Inheritance :: Type #2Init: 960gs, 12units 17
  • 18. Inheritance :: Type #2Init: 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 #2Init: 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 #2Init: 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 #2Init: 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 #2Init: 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 #2Init: 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 #2Init: 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 #2Init: 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
  • 26. Polymorphism.cls1 { width: 50%; color: red;}.cls1 { width: 60%; color: blue;} 26
  • 27. Polymorphism#content .cls1 { width: 50%; color: red;}#sidebar .cls1 { width: 60%; color: blue;} 27
  • 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
  • 30. Mixins<div class=“btn small”>Small</div><div class=“btn big”>Big</div> 30
  • 31. Aggregation.box { …}.box .header { …}.box > .footer { …} 31
  • 32. Aggregation is Polymorphic 32
  • 33. Composition.box { …}.box-header { …}.box-footer { …} 33
  • 34. Namespaces.page-home {…}.page-account {…}.page-home .box { … }.page-account .box { … } 34
  • 35. States.is-state {…}.has-something { … }.is-hidden {…}.has-notifications { … } 35
  • 36. Combine Stateswith Namespaces 36
  • 37. States.box { … }.box-content { … }.has-notifications { … }.has-notifications .box { … } 37
  • 38. UseLESS/Sass 38
  • 39. Combine with LESS/Sass 39
  • 40. Categories in SMACSS 40
  • 41. Categories in SMACSSBase RulesLayout RulesModule RulesState RulesTheme Rules 41
  • 42. You can create own categories 42
  • 43. Useful Resourceshttp://oocss.org/http://smacss.com/http://cssdoc.net/+ Google+ Wikipedia+ Slideshare+ Books on CSS 43
  • 44. What are Your Questions and Feedback? 44
  • 45. Thank youStanislav Usoltsev 45

×