Your SlideShare is downloading. ×
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

763

Published on

Ideas

Ideas

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

No Downloads
Views
Total Views
763
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
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

×