Dnevnik eklektika - Piše Dragan Babić

Klasicizam i IDealizam web dizajna

Klasicizam:

Pravac koji objedinjuje dela ozbiljne muzike nastala u ovom periodu, tj. reč je o drugoj polovini XVII veka…

Idealizam

Filozofski pravac koji smatra ideju za osnovu svega.

Hehe, ne nemam nameru da pričam o ovim stvarima, hoću da prodiskutujem upotrebu class i id u markupu i CSS-u. Siguran sam da ova dva slučaja (bolesti?) nastupaju direktno na primer po prelasku sa table based layouta na tableless layoute; što će reći da ne koristimo više tabele koje će nam držati naš predivan dizajn, već koristimo semantički strukturalni markup.

Dijagnoza klasicizma i IDealizma

Dakle radi se o sledećem. Dešava se da Sigurno je da se ljudi po prelasku sa rigidnih tabela na krhki CSS-om kontrolisani layout osećaju pomalo bespomoćno i oslabljeno. Kao riba na suvom moglo bi se reći. To je sasvim normalno jer se ceo koncept i pristup poslu menja. U tom momentu najčešće dolazi do klasicizma i/ili IDealizma, ili ako vam je baš frka—oba. ;)

Reč je o tome da se ide po markupu i dodaju klase (class) i ID-jevi (id) na sve strane, da bi se postigao željeni efekat na ekranu i/ili postizanje cross browser rešenja. Ne moram da vam pričam kako ovo zna da postane gadno, najverovatnije ste to već sami iskusili.

Ova pojava prouzrokuje razne probleme u radu od kojih su neki:

• Usporenje u radu,
• mnogo koda (direktno se može uporediti sa tzv. tag supom),
• problemi koji proističu usled konfuznih i neorganizovanih CSS dokumenata koji prave pakao kada se trebamo snaći da promenimo nešto,
• održavanje koda i izmene postaju otežane i mogućnost pravljenja greške se povećava.

Niko ne voli da sam sebi pravi posla i to je fakat, i upravo zato je potrebno naučiti (i zato pišem ovo) pisati čist i logičan markup i CSS. Stvari se stvarno daju iskomplikovati da je to neverovatno. Jedan od scenarija je da se vraćate na stari projekat koga se baš ni ne sećate nešto posebno, treba da promenite nešto, a kada otvorite dokument imate šta da vidite—pravi haos.

Ali hajde, nije samo o održavanju reč i o uštedi vremena, mada su to bitni aspekti svakom ko se bavi ovim poslom.

Jedna stvar čemu ja na primer težim uvek kada radim je da postignem apsolutnu jednostavnost i što manje zbrke, trudim se da napravim šeme rada, tako da mi sam proces rada bude rutina i onda čak i kada se vratim na nešto što sam radio davno, mogu da „zbrojim dva i dva” i pokontam o čemu se radi.

E sada što se tiče pojednostavljivanja stvari; HTML elementi imaju jednu veoma zgodnu osobinu, a to je nasleđivanje CSS osobina svojih očinskih (engl. parent) elemenata. Radi ilustracije pogledajte sledeći blok koda.

<div id="header">
  <h1 id="header-heading">
  God is not a woman, he's just a drunk white guy in the sky <span 
class="date">30.12.2005</span>
  </h1>
</div>

span je tu zato što hoćemo da datum bude u novom redu, a CSS bi za ovo mogao izgledati ovako (što direktno proističe iz markupa):

#header{ 
  margin:0; 
  padding:1em;
  background:cyan; /* sexxxxy :P */
} 
 #header-heading{
  Margin:.7em 1em;
  font:normal 1.7em/1.1em "times new roman", times, georgia, serif;
  letter-spacing:-2px;
}
.date{
  display:block;
  text-align:center;
  font-size:.8em;
  letter-spacig:normal;
}

Naizgled čini se veoma jednostavno, zar ne? Hajde da probamo malo drugačije.

<div id="header">
  <h1>
  God is not a woman, he's just a drunk white guy in the sky <span>30.12.2005</span>
  </h1>
</div>

U CSS-u ćemo sada da koristimo naslednost i pisati ga drugačije.

#header{ 
  margin:0; 
  padding:1em;
  background:cyan; /* sexxxxy :P */
} 
 #header h1{
  Margin:.7em 1em;
  font:normal 1.7em/1.1em "times new roman", times, georgia, serif;
  letter-spacing:-2px;
} 
 #header h1 span{
  display:block;
  text-align:center;
  font-size:.8em;
  letter-spacig:normal;
}

Mnogo čitkije, samo jedna klasa jedan id i logično pisan CSS u kome se znatno lakše da snaći—odmah vidite koji element je čiji potomak (eng. descendant). Znači kada se u CSS-u navode selektori jedan za drugim sa običnim razmacima između to onda znači (konkretno za ovaj primer, poslednji selektor) osobina za span koji je potomak h1 (heading level 1) koji je potomak #header (neki element kojem smo dali id="header"). Možda zvuči konfuzno ali je u suštini veoma jednostavno.

Ono što ova tehnika podrazumeva je malo jače poznavanje prirode elemenata i CSS osobina u smislu koja se prenosi na potomke, a koje su neprenosive, itd. Kada se navikne na te stvari i kada se nauče (kada se uštosi) sve ide glatko, brže i lakše.

Semantika u klasama i id-jevima

Ovo je možda far fetched za neke, ali ja pratim trudim se da ispoštujem kada god mogu ovu filozofiju, i opet se vraćamo na priču povećanja produktivnosti i upotrebljivosti markupa i CSS dokumenata od strane kreatora (ne benda Kreator ;)).

Imamo na primer potrebu da ispišemo grešku korisniku i odlučimo se da se ta greška ispisuje crvenim slovima.

<label class="red" for="email">Not a valid email adress!</label>

i CSS

.red{ color:red; }

OK, sve radi—sve lepo.

Sada odemo na sastanak sa klijentom i on kaže da mu se ne sviđa crvena, već iz nekih razloga hoće zelenu. Pihhh malera… Šta sad? Imaćemo klasu koja će se zvati class="red", a tekst
koji ona služi da oboji će bojiti u zeleno! To ne štima i jednostavno je uvrnuto i onda ako vas ne mrzi, menjate i ime klase u HTML-u, a ako vas mrzi onda teško onom ko će da prepravlja taj markup ili CSS. Ovde je stvar prilično banalna ali kada se ovde ubaci i nasleđivanje o kome smo govorili gore zna da nastane užasna zbrka jer onda se može desiti da utičemo na više elemenata istovremeno.

Ono što je logično i po meni je dobro stvoriti sebi ovakvu naviku je da odrađujemo nomenklaturu na kontekstualnoj osnovi, a ne na prezentacionoj. Dakle da bi izbegli ovakav problem ovaj class nećemo nazvati class="red", već nešto tipa class="error_msg" i onda neće biti ovakvih problema, a sam kod je čitljiviji i ima više smisla.

Ove tehnike su veoma potrebne i bitne ljudima koji rade u timovima, ali opet sa druge strane i svima ostalima u ovom poslu jer može kad-tad da uleti posao redizajna, ali ne od početka, a ko zna kako je pisan kod koji „nasleđujete„.

• « AJAX buzz i reciprocitet na webu(dva)
• Post novogodišnji post »

Komentari na ovaj unos 1

1. Zero-Cool kaže 30/12/05 05:00 PM

   Vrlo lepo i precizno, a takodje i korisno svima onima koji hoce da nauce lepo i struktuirano da pisu HTML+CSS.

   Svaka pohvala za text.SAmo napred

Komentariši unos “Klasicizam i IDealizam web dizajna”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.