OOCSS - SMACSS - BEM

Prezentace s poznámkami 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 - Změny pracovního postupu bez vnitřní motivace (nespokojenost s výsledky své práce, snaha zavést systém) - Srovnání motivací (pro někoho budou principy nové, pro někoho může jít jen o rekapitulaci popř. konfrontaci) - Dva důvody důležité pro mě:
4. PŘEHLEDNOST - Spravovatelnost (vyznat se ve vlastím kódu, návrat k projektu po delší době, práce v týmu, nový člen týmu) - Write Only :) (zbavit se takových výstupu, u kterých se později raději jen přetěžuje)
5. PŘEHLEDNOST
6. ZNOVUPOUŽITELNOST - Velikost (výsledného kódu je méně, lépe se spravuje, lépe se rozšiřuje, lépe se na něm staví) - Rychlost (rychlejší selektory, menší soubor ke stažení)
7. “Není jen jedna správná cesta…”
8. OOCSS - Nicole Sullivan - https://github.com/stubbornella/oocss/wiki
9. “1. Přemýšlejte v objektech, ne ve stránkách” - Objekt je strukturální vzor (část kódu - HTML, CSS a popř. JS), který je dostatečně abstraktní, aby mohl být znovupoužitelný napříč celým webem - Část stránky není objekt! - http://www.edenspiekermann.com/blog/posts/oocss-and-the-pagification-of-modules
10. .MEDIA OBJEKT Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
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” - UI Toolkit vs CSS Framework - https://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway
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” - Problém se znovupoužitelností - Problém se specifičností takových selektorů - !important peklo
19. html body .header .nav {} .nav {} vs - Tuhle navigaci už v patičce nepoužijete…
20. “5. Používejte mřížku” - Pevný rozměr omezuje znovupoužitelnost - Mřížka určuje šířku - Obsah určuje výšku
21. “6. Nepoužívejte ID selektory” - Problém se znovupoužitelností - Problém se specifičností takových selektorů - !important peklo
22. “7. Nesvazujte selektor s konkrétním elementem” - Problém se znovupoužitelností - Problém se specifičností takových selektorů - !important peklo
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 - Třída nezávislá na elementu a proto znovupoužitelná
24. SMACSS - Jonathan Snook - http://smacss.com/book - Techniky, které jsou primárně určeny pro větší projekty a spolupráci v týmu, ale stejně dobře se hodí i na malý web - Vychází z principů OOCSS, ale navíc zavádí pravidla organizace a syntaxe - Hloubka aplikovatelnosti - Rychlost selektorů
25. KATEGORIZACE
26. Base Layout Module State Theme - Base / tagy, pseudo třídy, … / velikosti nadpisů, barva odkazů, reset - Layout / mřížka a kontejnery, které “drží” obsah - Modules / objekty - znovupoužitelné části kódu / Subclassing / Submodules - State / změny objektů - aktivní, rozbalený, … / třídy, pseudotřídy a media queries / proaktivní použití !important - Theme / Vzhled resp. Téma (u většiny webů nemá smysl. Příklad: Envato Network)
27. POJMENOVÁNÍ
28. .l-inline {} ! .media {} .panel {} ! .menu__item.is-active {} .dropdown.is-collapsed {}
29. SHAME.CSS - Rychlé opravy - Dokumentace opravy - Průběžně tyto opravy řešit “správně” - http://csswizardry.com/2013/04/shame-css/
30. DOTAZY? V rámci diskuze nebo u pivka…
31. Patrik Illy / @illycz DÍKY