Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Workflow, czyli jak pracować z CSS-em?

563 views

Published on

Podczas prezentacji Michał pokaże, w jaki sposób możemy wykorzystać zasady znane z tworzenia oprogramowania w różnych językach backendowych, oraz jak zastosować je do tworzenia styli stron internetowych. Dzięki ich wykorzystaniu projekt, nad którym pracujemy, jest bardziej przejrzysty oraz optymalnie napisany, co pozwala na szybsze poprawki w przyszłości.

***

Michał Strześniewski podczas WordCamp Lublin 2017:
http://2017.lublin.wordcamp.org/session/css-workflow-czyli-jak-pracowac-z-css-em/

Published in: Education
  • Be the first to comment

  • Be the first to like this

CSS Workflow, czyli jak pracować z CSS-em?

  1. 1. CSS Workflow Czyli jak pracować z CSS-em Michał Strześniewski Lead Web Developer KERRIS Group
  2. 2. Poznajmy się!
  3. 3. Kto z was pracuje jako Frontend Developer?
  4. 4. Czy ktoś z was programuje również w innym języku?
  5. 5. Czy ktoś z was uczęszcza(ł) na / skończył studia informatyczne?
  6. 6. Czy korzystacie z preprocesorów CSS?
  7. 7. Kto z was słyszał o metodologii BEM
  8. 8. A kto z niej na co dzień korzysta?
  9. 9. Plan prelekcji Preprocesory CSS Metodologia BEM Zasady tworzenia dobrego kodu
  10. 10. Preprocesory CSS
  11. 11. Czym są preprocesory?
  12. 12. Jaki mamy wybór? Less Stylus Post CSS Sass/Scss
  13. 13. Rozszerzenia które oferuje preprocesor.
  14. 14. Zmienne // Colors $primaryColor: #fff; $secondaryColor: #000; // Borders $borderWidth: 2px; $borderRadius: 3px; .demo{ background: $primaryColor; color: $secondaryColor; boder: $borderWidth $secondaryColor solid; border-radius: $borderRadius; }
  15. 15. Zagnieżdzenia .demo{ background: $primaryColor; .element{ color: $secondaryColor; } &:before{ content: "<<<"; } &:after{ content: ">>>"; } }
  16. 16. Importy /* Theme Name: Theme Theme URI: http://kerris.pl/ Description: WordPress Theme Author: KERRIS Group | Michał Strześniewski */ @import 'tools/mixins'; @import 'base/variables'; @import 'base/reset'; @import 'base/base'; @import 'base/grid'; @import 'base/typography'; @import 'base/buttons'; @import 'elements/header'; @import 'elements/main'; @import 'elements/footer'; @import 'responsive/responsive';
  17. 17. Obliczenia //Numeric operations $addition: 10px + 2px; $substraction: 5px - 3px; $negation: -$margin; $division: $width/2; $multiplication: 1234px * 5; //Color operations p{ color: #010203 + #040506; // #050709 background: #010203 * 2; //#020406 }
  18. 18. Mixiny @mixin font-size($size) { font-size: $size; font-size: remCalc($size); } @mixin font($size: 14px,$weight: 400,$opacity: 1,$color: #fff){ @include font-size($size); font-weight: $weight; color:rgba($color,$opacity); line-height: 1em; }
  19. 19. Funkcje @function remCalc($size) { $remSize: $size / $htmlFontSize; @return $remSize * 1rem; } @function elementsList($element, $from:1, $to:6) { @if $from == $to { @return '#{$element}#{$from}'; } @else { @return '#{$element}#{$from}, ' + elementsList($element, $from+1, $to); } }
  20. 20. Listy //List $list: 1px 2px 3px; $commaSeparatedList: 1px, 2px, 3px; $oneElementList: 1px; $emptyList: (); $listOfLists: (1px 2px) (3px 4px); //Map - Association List $map: (one: 1px, two: 2px, three: 3px);
  21. 21. Pętle // For loop @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } // Foreach loop @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } } // While loop $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
  22. 22. Rozszerzony zakres funkcji .demo{ $color: #f00; $color2: rgba($color,0.5); // rgba(255, 0, 0, 0.5); $color3: opacify($color2,0.3); // rgba(255, 0, 0, 0.8); $color4: transparentize($color3,0.2);// rgba(255, 0, 0, 0.6); $hsl: hsl(0, 100%, 50%); //#f00 $newNumber: round($number); $newNumber2: ceil($number); $newNumber3: floor($number); $mapElement: map-get($map, $key); $twoListTogether: join($list1, $list2); $elemPosition: index($list, $value); $len: str-length($string); $newString: str-insert($string, $insert, $index); $upper: to-upper-case($string); }
  23. 23. Usprawnienia optymalizacji generowanego kodu :nested :expanded :compact :compressed
  24. 24. Metodologia BEM
  25. 25. Co to jest BEM? .block__element--modifier
  26. 26. Block Samodzielny, znaczącący element strony. Zarówno całe duże sekcje jak i mniejsze fragmenty o ile ich wyodrębnienie jest uzasadnione.
  27. 27. Block .header{} .menu{} .content{} .article{} .heading{} .form{} .input{} .footer{}
  28. 28. Element Fragment bloku który nie istenieje bez swojego rodzica. Jest w stu procentach zależny od bloku w którym się znajduje.
  29. 29. Element .header__logo{} .menu__item{} .footer__copyright{} .form__row{}
  30. 30. Modifier Flaga która zmienia wygląd bądź zachowanie bloków i elementów. Może być przypisywany do elementu jak i bezpośrednio do bloku.
  31. 31. Modifier .header--fixed{} .menu__item--highlighted{} .heading--secondary{} .input--disabled{} .article--sticky{}
  32. 32. Zalety korzystania z BEM Modularność. Reużywalność. Przejrzysta struktura.
  33. 33. Modularność. Style bloków nie mieszają się ze sobą. Brak problemów związanych z kaskadowością styli. Możliwość wykorzystania całych bloków w innych projektach.
  34. 34. Reużywalność. Przy dobrym rozplanowaniu bloków na stronie i wykorzystywaniu tych samych bloków w kilku miejscach znacząco zmniejszamy ilość pisanego kodu. Z wykorzystaniem dodatkowych narzędzi takich jak KSS możemy tworzyć w pełni zautomatyzowane guideline'y. To podejście nazywamy Style Guide Driven Development.
  35. 35. Przejrzysta struktura. Dzięki metodologii BEM tworzymy kod o solidnej strukturze. Łatwej do zrozumienia i odczytania przez współpracowników.
  36. 36. BEM in use <button class="button">Tekst</button> <button class="button button--success">Tekst</button> <button class="button button--success button--big">Tekst</button> .button{ ... color: black; background: white; padding:1em; } .button--success{ background: green; color: white; } .button--big{ padding:2em; }
  37. 37. BEM w SCSS <ul class="menu"> <li class="menu__item"></li> <li class="menu__item menu__item--highlighted"></li> </ul> .menu{ ... &__item{ ... &--highlighted{ ... } } }
  38. 38. A co jeżeli nie BEM? OOCSS SMACSS SUITCSS Atomic
  39. 39. Użycie którejkolwiek z tych metod zapewnia polepszenie waszej pracy z CSSem
  40. 40. Zasady tworzenia dobrego kodu
  41. 41. DRY
  42. 42. Nie powtarzaj się! Należy unikać zbędnych powtórzeń w kodzie Należy utrzymywać kod w takiej postaci aby nie było konieczności zmiany tej samej informacji w wielu miejscach
  43. 43. Nie powtarzaj się!
  44. 44. Jedno źródło prawdy Każda informacja przekazywana do systemu musi mieć dokładnie jedną reprezentację w kodzie. Zmiana informacji powinna wymagać edycji w dokładnie jednym miejscu.
  45. 45. Jedno źródło prawdy /********* * Fonts * *********/ $htmlFontSize: 14px; $primaryFont: 'proxima-nova', Arial, sans-serif; $secondaryFont: 'Times New Roman', Times, serif; /********** * Colors * **********/ $primaryColor: #3E5567; $secondaryColor: #E76855; $fontColor: #3E5567; $fontColor2: #fff; $bgColor: #fff; $borderColor: #E76855;
  46. 46. Nie powtarzaj się! / Jedno źródło prawdy Używaj zmiennych do przechowywania powtarzajacych się informacji Twórz mixiny do wykonywania powtarzalnych fragmentów Pamiętaj że nie każde powtórzenie w kodzie jest złe.
  47. 47. SOLID
  48. 48. SOLID Single responsibility principle (Zasada jednej odpowiedzialności) Open/closed principle (Zasada otwarte-zamknięte) Liskov substitution principle (Zasada podstawienia Liskov) Interface segregation principle (Zasada segregacji interfejsów) Dependency inversion principle (Zasada odwrócenia zależności)
  49. 49. Zasada jednej odpowiedzialności Klasa powinna być odpowiedzialna za dokładnie jedną rzecz. Nigdy nie powinien istnieć więcej niż jeden powód do modyfikacji klasy Należy podzielić problem na najmniejsze możliwe części
  50. 50. Zasada jednej odpowiedzialności @import 'elements/header'; @import 'elements/main'; @import 'elements/menu'; @import 'elements/post-type'; @import 'elements/sidebar'; @import 'elements/breadcrumbs'; @import 'elements/layout'; @import 'elements/page'; @import 'elements/404'; @import 'elements/taxonomy'; @import 'elements/single'; @import 'elements/footer';
  51. 51. Zasada otwarte-zamknięte Oprogramowanie powinno być otwarte na rozszerzenia ale zamknięte na zmiany. Przy zmianie wymagań nie powinien być zmieniany stary działający kod, ale dodawany nowy, który rozszerza zachowania
  52. 52. Zasada otwarte-zamknięte .button{ ... padding: 1em 2em; } .button--large{ padding: 1.5em 2.5em; }
  53. 53. Zasada podstawienia Liskov Klasa która dziedziczy po innej klasie może być podstawiona za swojego rodzica bez konsekwencji. W CSS jeżeli tworzymy klasę która jest odpowiedzialna za kolory to inna klasa która rozszerza jej właściwości również powinna odpowiadać za kolory. Jeżeli tworzymy modyfikator koloru to nie powinnien on wpływać na inne właściwości.
  54. 54. Zasada podstawienia Liskov .button{ color: green; padding: 1em 2em; } .button--large{ padding: 1.5em 2.5em; } .button--success{ color: red; }
  55. 55. Zasada segregacji interfejsów Wiele dedykowanych interfejsów jest lepsze niż jeden ogólny. Jeżeli 2 bloki na stonie dotyczą tego samego (np. artykuł) ale różnią się znacząco, należy stworzyć 2 oddzielne klasy stylizujące. Przesadane dążenie do reużywalności elementów jet anty-wzorcem.
  56. 56. Zasada odwrócenia zależności Bloki podrzędne nie mogą zależeć od nadrzędnych. Kod powinien być podzielony na małe samodzielne fragmenty
  57. 57. Zasada odwrócenia zależności .group-title{ }
  58. 58. SOLID Single responsibility principle (Zasada jednej odpowiedzialności) Open/closed principle (Zasada otwarte-zamknięte) Liskov substitution principle (Zasada podstawienia Liskov) Interface segregation principle (Zasada segregacji interfejsów) Dependency inversion principle (Zasada odwrócenia zależności)
  59. 59. Separacja zagadnień Elementy systemu powinny mieć rozłączne i osobliwe zastosowanie. Żaden z elementów nie powinien współdzielić odpowiedzialności z innym elementem Zmiana w jednej warstwie danych nie może wpływać na drugą
  60. 60. Separacja zagadnień w CSS Przypisuj style jedynie do klas CSS Nie używaj DOMu jako selektora CSS Nie przypisuj funkcji javascriptowych do klas używanych przez CSS Nie przypisuj CSS do atrybutów HTML przechowujących wartości
  61. 61. Separacja zagadnień <nav class="site-nav js-site-nav" role="navigation"> <ul class="site-nav__list"> <li class="site-nav__item"> <a class="site-nav__link is-active">...</a> </li> <li class="site-nav__item"> <a class="site-nav__link">...</a> </li> </ul> </nav>
  62. 62. Bibliografia Dokumentacja Sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html Get BEM http://getbem.com/ CSS for Software Engineers for CSS Developers – Harry Roberts / Front-Trends 2016 https://www.youtube.com/watch?v=wFn5nel3j6w SOLID CSS http://blog.millermedeiros.com/solid-css/
  63. 63. CSS Workflow Czyli jak pracować z CSS-em

×