Embed Size (px)
DESCRIPTION
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
Citation preview
Dobre i złe praktykiDobre i złe praktykikodowania 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
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”?
O czym dzisiaj?O czym dzisiaj?
Umiejętności dobrego kodera CSSUmiejętności dobrego kodera CSS● Konsekwencje stosowania złej architektury Konsekwencje 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
Jakie umiejętności powinien Jakie umiejętności powinien posiadać koder CSS?posiadać koder CSS?
● Mieć sprawne palce?● Powinien nie okazywać strachu?
Jakie umiejętności powinien Jakie 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
Jakie umiejętności powinien Jakie 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
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, traits Znajomość namespaces, traits
Analogia #1: CSS a PHPAnalogia #1: CSS a PHP
Konsekwencja stosowaniaKonsekwencja stosowaniazł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 samo kodu CSS powinien być tak samo ważny jak ważny jak projektprojekt graficzny, graficzny, projektprojekt struktur struktur danych, czy danych, czy projektprojekt architektury serwerów architektury serwerów
Cechy dobrej architektury CSSCechy dobrej architektury CSS
● przewidywlnaprzewidywlna● wielokrotnego użytkuwielokrotnego użytku● łatwa w utrzymaniułatwa w utrzymaniu● skalowalnaskalowalna
Przykłady złych praktykPrzykłady złych praktyk
Modyfikowanie komponentów na Modyfikowanie 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;}
A co jeśli... A co jeśli...
A co jeśli... białe tło będzie potrzebne też na A 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;}
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(...);}
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;}
Modyfikowanie komponentów na Modyfikowanie 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;}
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
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 / closedprinciple
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 { }
A co jeśli... zmieni się struktura HTML?A co jeśli... zmieni się struktura HTML?
#sidebar > div > h3 + p { }
#sidebar > section > h3 + p { }
nieprzewidywalnytrudny w utrzymaniu
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 utrzymaniujednokrotnego użytku
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 {}
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>
Sprawianie, by jedna reguła CSS Sprawianie, by jedna reguła CSS robiła zbyt wiele naraz robił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?
A co jeśli... potrzebny będzie taki sam blok w innym A 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;}
Sprawianie, by reguła robiła zbyt Sprawianie, by reguła robiła zbyt wiele naraz 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?.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
Sedno problemuSedno problemu
● Zbyt wiele odpowiedzialności za wygląd Zbyt wiele odpowiedzialności za wygląd pokładamy w CSSpokładamy w CSS
● CSS oddzielony od HTML nie oznacza, że CSS oddzielony od HTML nie oznacza, że warstwa treści oddzielona jest od warstwy warstwa treści oddzielona jest od warstwy prezentacjiprezentacji
……i jego rozwiązaniei jego rozwiązanie
● CSS powinien mieć jak najmniej odwołań do CSS powinien mieć jak najmniej odwołań do struktury HTMLstruktury HTML
● CSS powinien definiować wygląd elementów CSS powinien definiować wygląd elementów niezależnie od miejsca, gdzie zostaną one niezależnie od miejsca, gdzie zostaną one użyteużyte
● Jeśli dany komponent ma wyglądać inaczej w Jeś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 powinien nazywać (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ć
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-50percent button-50percent button-centeredbutton-centered”></a>
Analogia #3Analogia #3
CSS / HTML = SQL / PHPCSS / HTML = SQL / PHP
Dobre praktyki - Koduj z zamysłemDobre praktyki - Koduj z zamysłem
/* łom */#main-nav ul li ul { }
/* karabin snajperski */.subnav { }
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;}
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 {}
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;}
A co z przyrostem kodu HTML?A co z przyrostem kodu HTML?
WniosekWniosek
● CSS to tez jezyk programowaniaCSS to tez jezyk programowania
● Obowiązują te same podstawy: OSP, DRY...Obowiązują te same podstawy: OSP, DRY...
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/
QA?QA?
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:
