Raspodela CSS fajlova za vece sajtove

[vladv]

Interesuje me na koji je nacin je najbolje raspodeliti css fajlove za vece sajtove, npr neki poveci community sajt.
Da li je pametno praviti zasebne css fajlove za tipografiju, temu/boju, layout/strukturu ... ? Negde sam procitao da postoji vise cons nego pros za takvo nesto (specificity, velicina, ponavljanje selekyora) medjutim meni se cini kao najbolje resenje za trenutni projekat.
Ili je mozda najbolje napraviti generalni.css pa mozda za svaku stranicu po jedan dodatni, mada ne vidim neku bas svrhu u tome.

Uglavnom imam layout sa 3 kolone koje se razlikuju po sirini, gde se u srednoj i najsiroj nalaze dosta box ova sa dosta razlicitim sadrzajem gde i takodje treba napraviti vise xhtml strana sa razlicitim varijacijama strukture i sadrzajem boxova. Da li je pametno napraviti samo jedan css file za boxove koji bi sadrzao stilove za boxove svih pojedinacnih xhtml strana i elemenata koji se nalaze u njima ? U principu me interesuje kako vi razdeljujete css fajlove za vase projekte?

[mileusna]

Originalno napisao vladv

Interesuje me na koji je nacin je najbolje raspodeliti css fajlove za vece sajtove, npr neki poveci community sajt.

Malo je nejasno pitanje, kako misliš "najbolje"? Da li hoćeš da ti bude sve lepo na oko ili pitaš kako je najbolje da bi se sajt što brže učitavao?

Ako je ovo prvo onda ne znam odgovor, a za ovo drugo znam. Svaki novi CSS fajl znači i dodatnu konekciju i zahtev ka serveru, dodatni bandwidth, dodatni download, tako da je idealno da postoji jedan jedini CSS fajl.

Naravno sve zavisi i od tvog sajta, pa ako imaš neki ogroman CSS koji se koristi samo na nekoliko slabo posećenih strana, onda je svakako bolje da njega ipak izvojiš u posebnu datoteku.

Postoji i rešenje da su CSS fajlovi razdvojeni na strani servera, organizovani kako ti hoćeš, a da se prilikom slanja klijentu spajaju u jedan CSS.

[bluesman]

Ideja je da na strani imas sto manje http requests... znaci bolje je da ipak imas jedan veliki css kojem namesti da se kesira (odgovarajuce headere) pa onda mozda i ucitava druze prvi put ali svaki sledeci put je vec kesiran, nego mnogo manjih fajlova...

Opet, ako tvojoj aplikaciji vise lezi da podelis na manje fajlove, po sekcijama - treba da uradis tako. To se narocito odnosi na sajtove gde ne ocekujes par miliona poseta ... tu onda i nema puno veze.

Ja obicno drzim jedan veliki css u kojem su stvari koje se ponavljaju bar na 2-3 mesta, a u posebnim css fajlovima drzim samo nesto sto je bas specificno samo za jednu stranu... recimo imas neku stranu "plugins" i na njoj neke stilove koji se koriste samo tu... nema potrebe da budu u tom globalnom css-u kada se ucitavaju retko, ili bar redje od drugih, ako nista drugo - ono zbog preglednosti.

[vanja.petreski]

Za korisnike Jave: https://jawr.dev.java.net/

[Janko]

Originalno napisao bluesman

bolje je da ipak imas jedan veliki css kojem namesti da se kesira (odgovarajuce headere)

Ja bih sad ovo pitao u "početničkim pitanjima", ali kad je već ovde... Kako se to radi?

[dinke]

^
http://www.mnot.net/cache_docs/
http://en.wikipedia.org/wiki/List_of_HTTP_headers

Ne mislim da je bas pocetnicko, pogotovo za html forum

[bluesman]

Da, to nije pocetnicko pitanje... Prvo da napomenem za ovo kesiranje, da bi se postedeli frustracija, pogledajte odmah apache config da li su ukljuceni odgovarajuci moduli... sigurno mora mod_headers, mod_deflate i mozda jos neki ako nisam zaboravio.

Drugo, probaj da stavis u svoj .htaccess sledece

<FilesMatch "\.(js|css)$">
	Header set Cache-Control "public"
	Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
	Header unset Last-Modified
	SetOutputFilter DEFLATE
</FilesMatch>

To ce da omoguci kesiranje "na silu" svih .js, .css fajlova

Mozes jos da dodas i deflate, da bi bili poslati gzip-ovani browseru (vecina browsera zna sta da radi sa takvim sadrzajem) cime smanjujes velicinu fajlova za oko 40%

Naravno, nema potrebe da nesto gzipujes recimo jquery-packed jer neces dobiti puno.

[mb_sa]

Ukljucio sam mod_headers i mod_deflate, kod koji je bluesman postavio kopirao u .htaccess.

Probao sam da pratim kroz FireBug kao će se ponašati sa učitavanjem css i js fajlova.

Kada se stranica učita prvi put i uradi F5 (Refresh) uzima se iz cache-a (to bi trebalo da uradi i bez dodatnog forsiranja). Mjedutim, kada ponovo dodjem na istu stranicu ili druge (kroz linkove, tj. navigaciju u okviru apliackije) u Firebug-u ne pise da je uzeto iz cache-a.

Negdje fulam ili sam pogresno shvatio?

Hvala na odgovorima.

Pozdrav.

[ivanhoe]

pogledaj headere koje dobijas (u Firebugu), pa vidi sta pise za Expires

[mb_sa]

Čini se da salje kako treba headere.

Response Headers
Date	Fri, 19 Sep 2008 12:27:47 GMT
Server	Apache/2.2.4 (Win32) PHP/5.2.3
Last-Modified	Thu, 18 Sep 2008 15:04:07 GMT
Etag	"134f8-354a-e585b679"
Accept-Ranges	bytes
Content-Length	13642
Content-Type	text/css
Expires	Thu, 15 Apr 2010 20:00:00 GMT
Cache-Control	public
Vary	Accept-Encoding

Request Headers
Host	localhost
User-Agent	Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16
Accept	text/css,*/*;q=0.1
Accept-Language	en-us,en;q=0.5
Accept-Encoding	gzip,deflate
Accept-Charset	ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive	300
Connection	keep-alive
Referer	http://localhost/XXX/