Pro Yearly is on sale from $80 to $50! »

OOCSS - SMACSS - BEM

OOCSS - SMACSS - BEM

Prezentace z ostravského srazu Frontendistů 25.4.2014.

Edaa92fe8674c00b7ce852990a2d2737?s=128

Patrik Illy

April 27, 2014
Tweet

Transcript

  1. OOCSS / SMACSS / BEM Frontendisti.cz / 25.4.2014 / Ostrava

  2. PATRIK ILLY @illycz

  3. MOTIVACE

  4. PŘEHLEDNOST

  5. PŘEHLEDNOST

  6. ZNOVUPOUŽITELNOST

  7. “Není jen jedna správná cesta…”

  8. OOCSS

  9. “1. Přemýšlejte v objektech, ne ve stránkách”

  10. .MEDIA OBJEKT Lorem ipsum dolor sit amet, consectetur adipisicing elit,

    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  11. <div class="media"> <a class="media__img" href=“#"> <img src="" alt=“"> </a> <p

    class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
  12. .media { @extend %u-cf; display: block; } ! .media__img {

    float: left; margin-right: $base-unit; } ! .media__img img { display: block; } ! .media__body { overflow: hidden; }
  13. “2. Rozšiřujte objekt použitím více tříd”

  14. <div class="media"> ! <a class="media__img media__img--rev" href=“#"> <img src="" alt=“">

    </a> ! <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
  15. “3. Oddělujte strukturu od vzhledu”

  16. None
  17. <div class="panel"> <div class="panel__heading"> <h3 class="panel__title">Panel title</h3> </div> <div class="panel__body">

    Panel content </div> </div> ! <div class="panel panel--default">...</div> <div class="panel panel--primary">...</div>
  18. “4. Vyhněte se závislosti na kontextu”

  19. html body .header .nav {} .nav {} vs

  20. “5. Používejte mřížku”

  21. “6. Nepoužívejte ID selektory”

  22. “7. Nesvazujte selektor s konkrétním elementem”

  23. <button class="btn btn-default" type="button">Button</button> ! <input class="btn btn-default" type="submit" value="Submit">

    ! <a class="btn btn-default" href="#" role="button">Link</a> a.btn vs
  24. SMACSS

  25. KATEGORIZACE

  26. Base Layout Module State Theme

  27. POJMENOVÁNÍ

  28. .l-inline {} ! .media {} .panel {} ! .menu__item.is-active {}

    .dropdown.is-collapsed {}
  29. SHAME.CSS

  30. DOTAZY? V rámci diskuze nebo u pivka…

  31. Patrik Illy / @illycz DÍKY