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/

1. CSS Workflow
Czyli jak pracować z CSS-em
Michał Strześniewski
Lead Web Developer
KERRIS Group

2. Poznajmy się!

3. Kto z was pracuje jako Frontend Developer?

4. Czy ktoś z was programuje również w innym
języku?

5. Czy ktoś z was uczęszcza(ł) na / skończył studia
informatyczne?

6. Czy korzystacie z preprocesorów CSS?

7. Kto z was słyszał o metodologii BEM

8. A kto z niej na co dzień korzysta?

9. Plan prelekcji
Preprocesory CSS
Metodologia BEM
Zasady tworzenia dobrego kodu

10. Preprocesory CSS

11. Czym są preprocesory?

12. Jaki mamy wybór?
Less
Stylus
Post CSS
Sass/Scss

13. Rozszerzenia które oferuje preprocesor.

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. Zagnieżdzenia
.demo{
background: $primaryColor;
.element{
color: $secondaryColor;
}
&:before{
content: "<<<";
}
&:after{
content: ">>>";
}
}

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. 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. 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. 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. 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. 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. 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. Usprawnienia optymalizacji generowanego kodu
:nested
:expanded
:compact
:compressed

24. Metodologia BEM

25. Co to jest BEM?
.block__element--modifier

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. Block
.header{}
.menu{}
.content{}
.article{}
.heading{}
.form{}
.input{}
.footer{}

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. Element
.header__logo{}
.menu__item{}
.footer__copyright{}
.form__row{}

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. Modifier
.header--fixed{}
.menu__item--highlighted{}
.heading--secondary{}
.input--disabled{}
.article--sticky{}

32. Zalety korzystania z BEM
Modularność.
Reużywalność.
Przejrzysta struktura.

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. 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. Przejrzysta struktura.
Dzięki metodologii BEM tworzymy kod o solidnej
strukturze. Łatwej do zrozumienia i odczytania
przez współpracowników.

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. BEM w SCSS
<ul class="menu">
<li class="menu__item"></li>
<li class="menu__item menu__item--highlighted"></li>
</ul>
.menu{
...
&__item{
...
&--highlighted{
...
}
}
}

38. A co jeżeli nie BEM?
OOCSS
SMACSS
SUITCSS
Atomic

39. Użycie którejkolwiek z tych metod zapewnia
polepszenie waszej pracy z CSSem

40. Zasady tworzenia dobrego
kodu

41. DRY

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. Nie powtarzaj się!

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. 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. 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. SOLID

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. 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. 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. 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. Zasada otwarte-zamknięte
.button{
...
padding: 1em 2em;
}
.button--large{
padding: 1.5em 2.5em;
}

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. Zasada podstawienia Liskov
.button{
color: green;
padding: 1em 2em;
}
.button--large{
padding: 1.5em 2.5em;
}
.button--success{
color: red;
}

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. 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. Zasada odwrócenia zależności
.group-title{
}

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. 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. 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. 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. 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. CSS Workflow
Czyli jak pracować z CSS-em