Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OOCSS - SMACSS - BEM

OOCSS - SMACSS - BEM

Prezentace s poznámkami 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 - 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
  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” - 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