jedan ili vishe css

[ ancipalci @ 21.08.2011. 22:59 ] @

da li je bolje/pametnije pisati jedan css za ceo sajt ili za svaku html stranicu posebno?
recimo da imam potpuno razlichit sadrzaj na svakoj stranici sem header-a i sidebar-a
hvala unapred

[ Aleksandar Ružičić @ 21.08.2011. 23:25 ] @

To je diskutabilno, svaki novi resurs (fajl) je dodatan zahtev koji browser salje serveru (a ti zahtevi umeju da potraju..), ali ukoliko ti svaka strana koristi druge stilove od ostalih (sto moze da znaci i da je lose napisan css) moze da se desi da bi kombinovanjem svih stilova u jedan css fajl dobio veliki fajl od koga svaka strana koristi samo mali procenat koda. E sad, ukoliko se kesiranje odradi kako treba to moze da prestavlja samo (manji) problem prilikom prvog ucitavanja bilo koje stranice koja koristi taj css fajl..
U svakom slucaju, to je nesto sto dosta zavisi i od samog css, sajta i servera, imas par alata za merenje brzine ucitavanja stranica (YSlow, PageSpeed) pa vidi sta ti oni predlazu da optimizujes.

[ plus_minus @ 22.08.2011. 01:40 ] @

@ancipalci

U slučaju da neki sajt ima više css fajlova ili je jedan ogroman a gabaritan u pitanju, najbolje je koristiti pomoć samog servera i uvek do tačnina reći serveru koji deo css-a treba da se prikaže na zahtev iz samo jednog fajla.
U pitanju je php kao jedno od rešenja za tvoj problem. A jeste dobro što se interesuješ za ove 'sitnice', izuzetno bitan faktor ako govorimo o performansama samog sajta. :)
Ne znam koliko si upoznat sa istim, svejedno, ovo što ću ispisati je zaista lagano za praksu.

Css dokument je dakle moguće prezentovati kroz php fajl. Isto tako i javaskriptu.
Preduslov za ovu metodu jeste osposobljen localhost i pravilno instaliran php.
Neka bude da imaš wamp ili lamp ili xamp prethodno instaliran.

Ovo je npr. konstrukcija nekog dokumenta odakle linkuješ css fajl.

Code (html):

<!DOCTYPE html>

<html><head>

<meta charset="utf-8">

<title>Naziv stranice</title>

<link rel="stylesheet" media="all" type="text/css" href="css/style.css" />

</head>

<body id="index">

  <h1>BIg one</h1>

      <p>bla, bla, truć.. </p>

</body>

</html>

Preimenuj sami style.css dokument u style.php pre nego što promeniš sami source u ovako nešto:

Code (html):

<link rel="stylesheet" media="all" type="text/css" href="css/style.php?mode=index" />

css/style.php?mode=index

Gde je mode (proizvoljna reč ili misao) a 'index' recimo naziv same web stranice, opet proizvoljno, bez obzira na naziv stranice.

Nakon toga, ubaci naredni deo u sami css/php fajl.
Ovako nekako bi to trebalo da izgleda...

Code (php):

<?php 

header('Content-type:text/css'); 

$mode = filter_input(INPUT_GET, 'mode', FILTER_SANITIZE_STRING);

?>

@charset 'utf-8';

* {margin:0; padding:0; outline:0 none;}

html, body {font-size:10px;text-align:center;}

body {position:relative;margin:25px auto 0px auto;width:950px;}

h1, h2 {line-height:1.4;}

p {font-size:150%;}

#footer {clear:both;

background:White;

width:950px;height:50px;

margin-bottom:5px;

border:1px solid Lightgrey;}

Onoliko koliko stranica imaš gde se css ređa i menja u zavisnosti od same stranice i sadržine, toliko različitih $mode varijanti ili naziva praviš. To jest, deliš, rasparčavaš.. i svaki zaseban deo poistovetiš sa proizvoljnim nazivom i sve to regulišeš iz jednog css/php fajla koji uz pomoć servera prikazuje samo odabrani $mode.

Npr.

Code (php):

<?php 

header('Content-type:text/css'); 

$mode = filter_input(INPUT_GET, 'mode', FILTER_SANITIZE_STRING);

$naslovna = "

body#index {background:Black url('src/image.png') no-repeat center top scroll;}

body#index h1 {font-size:300%;}

body#index h2 {font-size:280%;}

#leviDeo {width:200px; height:auto; float:left;}

#sredina {float:left;width:400px;}

#desniDeo {float:right; width:150px}

";

$about = "

body#about {background:none;}

body#about h1 {font-size:300%; color:Indianred;}

body#about h2 {font-size:280%; color:Navy;}

#leviDeo {width:200px; height:auto; float:left;}

#sredina {float:left;width:400px;}

#desniDeo {float:right; width:150px}

fieldset {box-shadow:0px 0px 3px Lightgreen; 

-moz-box-shadow:0px 0px 3px Lightgreen; 

-webkit-box-shadow:0px 0px 3px Lightgreen;}

";

?>

@charset 'utf-8';

* {margin:0; padding:0; outline:0 none;}

html, body {font-size:10px; text-align:center;}

body {position:relative; margin:25px auto 0px auto; width:950px;}

h1, h2 {line-height:1.4;}

p {font-size:150%;}

<?php 

if ($mode=='index') {echo $naslovna;}

if ($mode=='oNama') {echo $about;} 

?>

#footer {clear:both;

background:White;

width:950px;height:50px;

margin-bottom:5px;

border:1px solid Lightgrey;}

Ok. Ako imaš recimo samo ovakve 2 stranice, index i about, na index-u će biti kao i iznad
css/style.php?mode=index
dok će za about izgledati ovako → css/style.php?mode=oNama

Ako odradiš sve kako treba, nebitno je hoće li tvoj css biti 100 ili više kilobajta.
Uz malu pomoć php-a, u samom css-u, između taga za paragraf i footer div elementa, po potrebi će se smenjivati $about ili $naslovna ili $neka_druga - jednakost, te ćeš na taj način dobiti izuzetno mali css dokument. Svaki bit koji nije 'uokviren' php naznakom, neće biti vidljiv za browser.

Naravno, ako imaš volje i vremena, možeš i svaku stavku posebno pretvoriti u text-string i dobiti savršeno 'pogođeni' css dokument gde se nijedno pravilo ne ponavlja ili je viška.
Ne moraš kompletan blok koda preseliti u jedan string.

npr.

Code (php):

<?php 

header('Content-type:text/css'); 

$mode = filter_input(INPUT_GET, 'mode', FILTER_SANITIZE_STRING);

$body = "position:relative; margin:25px auto 0px auto; width:950px;";

$red = "color:Red;";

$blue = "color:Blue;";

$hidden = "position:absolute; z-index:-100;";

?>

@charset 'utf-8';

* {margin:0; padding:0; outline:0 none;}

html, body {font-size:10px; text-align:center;}

body {<?php echo $body; ?>}

h1, h2 {line-height:1.4;}

p {font-size:150%;}

nav {<?php echo $red;?>}

noscript {<?php echo $hidden; ?>}

#footer {<?php echo $blue;?>

clear:both;

background:White;

width:950px;height:50px;

margin-bottom:5px;

border:1px solid Lightgrey;}

Ako je sve ovo bilo nejasno, biću voljan da otklonim sve kočnice.
Do not hesitate to ask.

_{[Ovu poruku je menjao plus_minus dana 24.08.2011. u 00:36 GMT+1]}

[ raaddd @ 22.08.2011. 13:14 ] @

Sasvim je ok pisati jedan CSS fajl za ceo sajt, osim ukoliko želiš stilove razdvojiti po funkcionalnosti, kao npr. u nekim WP temama gde se posebno importuju reset, stilovi za tipografiju itd.

Možeš koristiti kontekstualne selektore na osnovu ID-a za body tag. Pazi sa ovim načinom rada jer lako može postati budženje.

Zaista nema potrebe opterećivati server sa ovakvim sitnicama.

[ Aleksandar Ružičić @ 22.08.2011. 14:29 ] @

@plus_minus:

Takvo resenje je veoma tesko za odrzavanje i sam kod nije bas najefikasnije moguce napisan.. Moja preporuka je da se ovakvo resenje zaobidje..

[ plus_minus @ 22.08.2011. 15:56 ] @

Citat:

raaddd: Sasvim je ok pisati jedan CSS fajl za ceo sajt, osim ukoliko želiš stilove razdvojiti po funkcionalnosti, kao npr. u nekim WP temama gde se posebno importuju reset, stilovi za tipografiju itd.

Možeš koristiti kontekstualne selektore na osnovu ID-a za body tag. Pazi sa ovim načinom rada jer lako može postati budženje.

Zaista nema potrebe opterećivati server sa ovakvim sitnicama.

Koji server je u pitanju? Koji hardver zapravo?
Koliko su današnji serveri 'sporiji' i nesposobniji u odnosu na prethodnu liniju hardvera, da tako u globalu - postavim?
I jesu li sporiji i nesposobniji? :D Naravno da nisu.
Pogotovo ako se pojedinačan dokument sa svim varijantama iskešira na 5 sati, npr. Onda User-PC sam vuče iz svog keša.

Citat:

Aleksandar Ružičić: @plus_minus:

Takvo resenje je veoma tesko za odrzavanje i sam kod nije bas najefikasnije moguce napisan.. Moja preporuka je da se ovakvo resenje zaobidje..

Nekome je teško, nekome nije. :) A što se načina pisanja i efikasnosti tiče, to je sklepano tada kada sam i pisao poruku, ali bez obzira, ako kopira u svoj omiljeni editor, lako će se snaći i prepraviti. Pojaviće se i boje, itd. Sve u svemu, ja to praktikujem u svom radu, obavezno. I funkcioniše baš kako treba. Pogotovo za Google Page Speed tool, što pretpostavljam i jeste namera ancipalci. Da optimizuje >>shrinkuje<< svoj kod.

Ne vidim, dakle, zašto bi se zaobilazila ovakva rešenja. Ona možda jesu samo malo komplikovanija, ali, samo tako i ima i napretka i efekta.