Architektura CSS - dobre i złe praktyki

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: