Dobre i złe praktyki kodowania w CSS czyli... zostań nindżą CSS już dziś*! *satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane

1. Dobre i złe praktykiDobre i złe praktyki
kodowania w CSSkodowania w CSS
czyli...czyli...
*satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane*satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane
zostań nindżą CSS już dziś*!zostań nindżą CSS już dziś*!
Kuba Wiśniewski, DevTank S02E07, 19.03.2013Kuba Wiśniewski, DevTank S02E07, 19.03.2013

2. Krótka ankietaKrótka ankieta
●
Ilu na sali mamy frontendowców?Ilu na sali mamy frontendowców?
●
Raczej “koder” czy ”programista”?Raczej “koder” czy ”programista”?

3. O czym dzisiaj?O czym dzisiaj?
Umiejętności dobrego kodera CSSUmiejętności dobrego kodera CSS
●
Konsekwencje stosowania złej architekturyKonsekwencje stosowania złej architektury
CSSCSS
●
Cechy dobrej architektury CSSCechy dobrej architektury CSS
●
Przykłady złych praktykPrzykłady złych praktyk
●
Sedno problemu i jego rozwiązanieSedno problemu i jego rozwiązanie
●
Dobre praktykiDobre praktyki
●
ZaleceniaZalecenia

4. Jakie umiejętności powinienJakie umiejętności powinien
posiadać koder CSS?posiadać koder CSS?
● Mieć sprawne palce?
● Powinien nie okazywać strachu?

5. Jakie umiejętności powinienJakie umiejętności powinien
posiadać dobry koder CSS?posiadać dobry koder CSS?
●
Wierne dzwierciedlanie wyglądu z pliku .psdWierne dzwierciedlanie wyglądu z pliku .psd
●
Kodowanie bez użycia tabelekKodowanie bez użycia tabelek
●
Stosowanie jak najmniejszej ilości obrazkówStosowanie jak najmniejszej ilości obrazków
●
Stosowanie @mediaStosowanie @media
●
Znajomość CSS3/HTML5Znajomość CSS3/HTML5

6. Jakie umiejętności powinienJakie umiejętności powinien
posiadać programista PHP?posiadać programista PHP?
●
Kodowanie zgodne ze specyfikacjąKodowanie zgodne ze specyfikacją
●
Znajomość zasad OOPZnajomość zasad OOP
●
Znajomość wzorców projektowychZnajomość wzorców projektowych
●
Tworzenie kodu łatwego do zarządzaniaTworzenie kodu łatwego do zarządzania
●
Znajomość namespaces, traitsZnajomość namespaces, traits

7. Dobry dev CSS PHP devDobry dev CSS PHP dev
Wierne dzwierciedlanie wyglądu z pliku .psdWierne dzwierciedlanie wyglądu z pliku .psd
Kodowanie bez użycia tabelekKodowanie bez użycia tabelek
Stosowanie jak najmniejszej ilości obrazkówStosowanie jak najmniejszej ilości obrazków
Stosowanie @mediaStosowanie @media
Znajomość CSS3/HTML5Znajomość CSS3/HTML5
Kodowanie zgodne ze specyfikacjąKodowanie zgodne ze specyfikacją
Znajomość zasad OOPZnajomość zasad OOP
Znajomość wzorców projektowychZnajomość wzorców projektowych
Tworzenie kodu łatwego do zarządzaniaTworzenie kodu łatwego do zarządzania
Znajomość namespaces, traitsZnajomość namespaces, traits
Analogia #1: CSS a PHPAnalogia #1: CSS a PHP

8. Konsekwencja stosowaniaKonsekwencja stosowania
złej architektury CSSzłej architektury CSS
●
Spowolnienie rozwoju aplikacjiSpowolnienie rozwoju aplikacji
●
CSS to ważny element każdej aplikacji WEBCSS to ważny element każdej aplikacji WEB
●
ProjektProjekt kodu CSS powinien być tak samokodu CSS powinien być tak samo
ważny jakważny jak projektprojekt graficzny,graficzny, projektprojekt strukturstruktur
danych, czydanych, czy projektprojekt architektury serwerówarchitektury serwerów

9. Cechy dobrej architektury CSSCechy dobrej architektury CSS
●
przewidywlnaprzewidywlna
●
wielokrotnego użytkuwielokrotnego użytku
●
łatwa w utrzymaniułatwa w utrzymaniu
●
skalowalnaskalowalna

10. Przykłady złych praktykPrzykłady złych praktyk

11. Modyfikowanie komponentów naModyfikowanie komponentów na
podstawie tego, kim są ich rodzicepodstawie tego, kim są ich rodzice
●
przewidywalny?przewidywalny?
●
wielokrotnego użytku?wielokrotnego użytku?
●
łatwy w utrzymaniu?łatwy w utrzymaniu?
.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: white;
}

12. A co jeśli...A co jeśli...

13. A co jeśli... białe tło będzie potrzebne też naA co jeśli... białe tło będzie potrzebne też na
nowej stronie?nowej stronie?
.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget,
body.anotherpage .widget {
background: white;
}

14. A co jeśli... obrazek będzie w tle?A co jeśli... obrazek będzie w tle?
.widget {
background: url(...);
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: url(...);
}

15. A co jeśli... obrazek będzie w tle?A co jeśli... obrazek będzie w tle?
/s/skin/classic.css
.widget {
background: url(...);
border: 1px solid black;
color: black;
width: 50%;
}
/s/skin/z-zupelnie-innej-beczki-dolaczany-tylko-na-jednej-podstronie.css
body.homepage .widget {
background: white;
}

16. Modyfikowanie komponentów naModyfikowanie komponentów na
podstawie tego, kim są ich rodzicepodstawie tego, kim są ich rodzice
nieprzewidywalnynieprzewidywalny
jednokrotnego użytkujednokrotnego użytku
trudny w utrzymaniutrudny w utrzymaniu
.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: white;
}

17. Analogia #2: CSS a PHPAnalogia #2: CSS a PHP
““.widget” to klasa, którą zmieniamy na potrzeby.widget” to klasa, którą zmieniamy na potrzeby
tylko jednego konkretnego przypadku użyciatylko jednego konkretnego przypadku użycia

18. Analogia #2: CSS a PHPAnalogia #2: CSS a PHP
●
““.widget” to klasa, którą zmieniamy na potrzeby.widget” to klasa, którą zmieniamy na potrzeby
jednego konkretnego przypadku użyciajednego konkretnego przypadku użycia
open / closed
principle

19. Zbyt skomplikowane selektoryZbyt skomplikowane selektory
●
przewidywalny?przewidywalny?
●
wielokrotnego użytku?wielokrotnego użytku?
●
łatwy w utrzymaniu?łatwy w utrzymaniu?
#main-nav ul li ul li div { }
#sidebar > div > h3 + p { }

20. A co jeśli... zmieni się struktura HTML?A co jeśli... zmieni się struktura HTML?
#sidebar > div > h3 + p { }
#sidebar > section > h3 + p { }
nieprzewidywalny
trudny w utrzymaniu

21. A co jeśli... chcemy dodać drugie menu w stopce?A co jeśli... chcemy dodać drugie menu w stopce?
#main-nav ul li ul li div { }
#main-nav ul li ul li div,
#footer-nav ul li ul li div { }
trudny w utrzymaniu
jednokrotnego użytku

22. Zbyt ogólne nazwy klasZbyt ogólne nazwy klas
<div class="widget">
<h3 class="title">...</h3>
<div class="contents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In condimentum justo et est dapibus sit amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class="action">Click Me!</button>
</div>
</div>
.widget {}
.widget .title {}
.widget .contents {}
.widget .action {}

23. A co jeśli... na innej stronie będzie już klasa .title?A co jeśli... na innej stronie będzie już klasa .title?
nieprzewidywalnynieprzewidywalny
moj-plik.css
.widget {}
.widget .title {foo: bar;}
.widget .contents {}
.widget .action {}
plik-innego-deva.css
.title {abc: xyz;}
<div class="widget">
<h3 class="title">foo: bar; abc: xyz;</h3>
<div class="contents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In condimentum justo et est dapibus sit amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class="action">Click Me!</button>
</div>
</div>

24. Sprawianie, by jedna reguła CSSSprawianie, by jedna reguła CSS
robiła zbyt wiele narazrobiła zbyt wiele naraz
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
wielokrotnego użytku?wielokrotnego użytku?

25. A co jeśli... potrzebny będzie taki sam blok w innymA co jeśli... potrzebny będzie taki sam blok w innym
miejscu na stronie?miejscu na stronie?
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
.widget2 {
position: absolute;
bottom: 20px;
right: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}

26. Sprawianie, by reguła robiła zbytSprawianie, by reguła robiła zbyt
wiele narazwiele naraz
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
wielokrotnego użytku?wielokrotnego użytku?
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;background-color: red;
font-size: 1.5em;font-size: 1.5em;
text-transform: uppercase;text-transform: uppercase;
}
layout - nielayout - nie
look n' feel - taklook n' feel - tak

27. Sedno problemuSedno problemu
●
Zbyt wiele odpowiedzialności za wyglądZbyt wiele odpowiedzialności za wygląd
pokładamy w CSSpokładamy w CSS
●
CSS oddzielony od HTML nie oznacza, żeCSS oddzielony od HTML nie oznacza, że
warstwa treści oddzielona jest od warstwywarstwa treści oddzielona jest od warstwy
prezentacjiprezentacji

28. ……i jego rozwiązaniei jego rozwiązanie
●
CSS powinien mieć jak najmniej odwołań doCSS powinien mieć jak najmniej odwołań do
struktury HTMLstruktury HTML
●
CSS powinien definiować wygląd elementówCSS powinien definiować wygląd elementów
niezależnie od miejsca, gdzie zostaną oneniezależnie od miejsca, gdzie zostaną one
użyteużyte
●
Jeśli dany komponent ma wyglądać inaczej wJeśli dany komponent ma wyglądać inaczej w
innym przypadku użycia, to powinien inaczej sięinnym przypadku użycia, to powinien inaczej się
nazywać (w CSS) i to HTML powiniennazywać (w CSS) i to HTML powinien
(za pomocą tej innej nazwy) do niego się(za pomocą tej innej nazwy) do niego się
odwoływaćodwoływać

29. Prosty przykładProsty przykład
.button {
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
.button-100px {
width: 100px;
}
.button-50percentbutton-50percent {
width: 50%;
}
.button-centeredbutton-centered {
margin: 0 auto;
}
<input class=”button”>
<span class=”button button-100px”></span>
<div class=”button button-50percentbutton-50percent”></div>
<a class=”button button-50percentbutton-50percent button-centeredbutton-centered”></a>

30. Analogia #3Analogia #3
CSS / HTML = SQL / PHPCSS / HTML = SQL / PHP

31. Dobre praktyki - Koduj z zamysłemDobre praktyki - Koduj z zamysłem
/* łom */
#main-nav ul li ul { }
/* karabin snajperski */
.subnav { }

32. Dobre praktyki - Rozdziel zakresyDobre praktyki - Rozdziel zakresy
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;background-color: red;
font-size: 1.5em;font-size: 1.5em;
text-transform: uppercase;text-transform: uppercase;
}
.l-widget {
position: absolute;
top: 20px;
left: 20px;
}
.widget {
background-color: red;background-color: red;
font-size: 1.5em;font-size: 1.5em;
text-transform: uppercase;text-transform: uppercase;
}

33. Dobre praktyki – Używaj przestrzeni nazwDobre praktyki – Używaj przestrzeni nazw
.widget {}
.widget .title {}
.widget .contents {}
.widget .action {}
.widget {}
.widget-title {}
.widget-contents {}
.widget-action {}

34. Dobre praktyki – Używaj modyfikatorówDobre praktyki – Używaj modyfikatorów
.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: white;
} .widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
.widget-sidebar {
width: 200px;
}
.widget-homepage {
background: white;
}

35. A co z przyrostem kodu HTML?A co z przyrostem kodu HTML?

36. WniosekWniosek
●
CSS to tez jezyk programowaniaCSS to tez jezyk programowania
●
Obowiązują te same podstawy: OSP, DRY...Obowiązują te same podstawy: OSP, DRY...

37. ZaleceniaZalecenia
●
opracowanie architekturyopracowanie architektury
●
edukacja pracownikówedukacja pracowników
●
adaptacja starteraadaptacja startera
...a póki co......a póki co...
●
stosuj już dziś, tak jak na:stosuj już dziś, tak jak na: http://fakty.interia.pl/http://fakty.interia.pl/

38. QA?QA?

39. Dzięki za uwagęDzięki za uwagę
https://gist.github.com/csswizardry/4136435
http://csswizardry.com/2012/11/code-smells-in-css/
http://oliverjash.me/2012/11/23/css-exceptions-object-modifiers-or-extensions.html
http://engineering.appfolio.com/2012/11/16/css-architecture/
Linkografia: