OOCSS - SMACSS - BEM

Prezentace z ostravského srazu Frontendistů 25.4.2014.

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”
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