OOCSS     &  SMACSSStanislav Usoltsev
Overview•   Encapsulation•   Inheritance•   Polymorphism•   Mixins•   Aggregation•   Composition•   Namespaces•   States  ...
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>           ...
Inheritance.cls1 {     width: 50%; color: red;}.subcls1 {    /* new properties */}                               5
Inheritance :: Type #1.cls1 {     width: 50%; color: red;}/* via classes */.cls1.subcls1 {     …}                         ...
Inheritance :: Type #1.btns {    background: url(„sprite.png‟);}.btns.submit {    background-position: -40px 0;}          ...
Inheritance :: Type #1class Button {     protected $_background;}class ButtonSubmit extends Button {     protected $_bg_po...
Inheritance :: Type #10     0   0   0   0   0   0   0                                  9
Inheritance :: Type #1         !importantinline   #ID   .class   tag   inline   #ID   .class   tag  0       0      0      ...
Inheritance :: Type #1           !important inline   #ID    .class   tag   inline   #ID   .class   tag   0       0       0...
Inheritance :: Type #1           !important inline   #ID    .class   tag   inline   #ID   .class   tag   0       0       0...
Inheritance :: Type #1          !important inline   #ID   .class   tag   inline   #ID   .class   tag   0       0      0   ...
Inheritance :: Type #1          !important inline   #ID   .class   tag   inline   #ID   .class   tag   0       0      0   ...
Inheritance :: Type #1.btns {                                .class                                         1    backgroun...
Inheritance :: Type #2.cls1 {     width: 50%; color: red;}/* via media queries */@media … {   …}                          ...
Inheritance :: Type #2Init: 960gs, 12units                               17
Inheritance :: Type #2Init: 960gs, 12units.unit-1    { width: 60px; margin: 10px; }.unit-2    { width: 140px; margin: 10px...
Inheritance :: Type #2Init: 960gs, 12units                         Final: 1280gs, 16units.unit-1    { width: 60px; margin:...
Inheritance :: Type #2Init: 960gs, 12units                         Final: 1280gs, 16units.unit-1    { width: 60px; margin:...
Inheritance :: Type #2Init: 960gs, 12units                         Final: 1280gs, 16units.unit-1    { width: 60px; margin:...
Inheritance :: Type #2Init: 960gs, 12units                         Final: 1280gs, 16units.unit-1    { width: 60px; margin:...
Inheritance :: Type #2Init: 960gs, 12units                       Final: 1280gs, 16units.unit-1 { width: 60px; margin: 10px...
Inheritance :: Type #2Init: 960gs, 12units                       Final: 1280gs, 16units.unit-1 { width: 60px; margin: 10px...
Inheritance :: Type #2Init: 960gs, 12units                       Final: 1280gs, 16units.unit-1 { width: 60px; margin: 10px...
Polymorphism.cls1 {     width: 50%; color: red;}.cls1 {     width: 60%; color: blue;}                                26
Polymorphism#content .cls1 {   width: 50%; color: red;}#sidebar .cls1 {    width: 60%; color: blue;}                      ...
Polymorphism…     public __construct(Section $section) {            $this->_section = $section;     }     public function ...
Mixins.btn {         /* default value of width,            e.g. auto or inherit */}.small {       width: 100px;}.big {    ...
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 { … }                         ...
States.is-state      {…}.has-something { … }.is-hidden         {…}.has-notifications { … }                           35
Combine Stateswith Namespaces                  36
States.box { … }.box-content { … }.has-notifications { … }.has-notifications .box { … }                                37
UseLESS/Sass            38
Combine with LESS/Sass               39
Categories in SMACSS                       40
Categories in SMACSSBase RulesLayout RulesModule RulesState RulesTheme Rules                         41
You can create own    categories                     42
Useful Resourceshttp://oocss.org/http://smacss.com/http://cssdoc.net/+ Google+ Wikipedia+ Slideshare+ Books on CSS        ...
What are Your Questions    and Feedback?                          44
Thank youStanislav Usoltsev                     45
Upcoming SlideShare
Loading in …5
×

OOCSS sand SMACSS

1,129 views

Published on

Ideas

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

No Downloads
Views
Total views
1,129
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

OOCSS sand SMACSS

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

×