Css troppo lungo?

vale76

Il CSS viene lungo all'occorrenza, non ti preoccupare.
L'unico problema è la dimensione del file, ma si risolve facilmente con i compressori (ne esistono diversi).

L'importante, se poi ci devi rimettere sopra le mani, è che sia leggibile

ehm, Laburno, approfitto io per chiederti, a proposito di dimensione di file, io ho il mio css principale che pesa 10.653

è troppo?

laburno

@Vale76 said:

ehm, Laburno, approfitto io per chiederti, a proposito di dimensione di file, io ho il mio css principale che pesa 10.653

è troppo?

Dipende
Ho visto fogli molto più grandi, che contenevano grandi quantità di regole.

Se il tuo CSS ha 5/6 regole allora forse 10k sono troppi.
Se ne ha 30 no :bho:

A volte si riesce a risparmiare un gran numero di kilobyte semplicemente organizzandolo meglio: evitare ripetizione, sfruttare l'ereditarietà e la cascata, togliere troppi spazi e indentature etc.

Molti ottimizzatori CSS ti permettono di migliorarlo in questo senso, mantenendone la leggibilità. Fai una ricerca su google ne trovi a pacchi di questi tools

vale76

@Laburno said:

Dipende
A volte si riesce a risparmiare un gran numero di kilobyte semplicemente organizzandolo meglio: evitare ripetizione, sfruttare l'ereditarietà e la cascata, togliere troppi spazi e indentature etc.

ah ma mica lo sapevo! per spazi intendi, le righe vuote tra una dichiarazione e l'altra? e le indentature? vuol dire lo spazio dal margine sinistro?

misterwo

x le indentature credo nessun problema...uno decide come meglio crede di organizzarsi il foglio o tutto in linea o con a capi ed indentature...credo invece che forse le righe vuote rompano un po'...e poi come ti dicevo anche io, evitare di ripetere elementi...

tipo il body lo dichiari solo una volta, l'header ed il footer idem...magari fai lo stesso x gli h1, a, le liste ecc...insomma le cose che non cambieranno mai le dichiari una volta sola...(se fai + fogli ovvio... :D)

laburno

Ogni carattere, in qualsiasi documento, richiede 8 bit. Questo comprende gli spazi e gli a capo.

Capirai bene che se dopo ogni regola metto un a capo, e, poniamo, io abbia un foglio con 100 regole, avrò 8x100=800bit dovuti solo agli a capo.

Spesso si comprime tramite script PHP (ma anche altro) semplicemente eliminando gli spazi e gli a capo. Ovviamente questo va a discapito della leggibilità del foglio.

vampiretta

Oh quante cose ho scoperto, pensavo fosse una doamnda stupidissima e invece come sempre mi avete fatto scoprire cose nuove.

Dunque io ho un file che pesa 10k ma ci sono 30 e passa regole.

Ho già fatto il possibile per raggruppare e riutilizzare regole, ma alcune mi sono proprio inevitabili aggiungerle nuove, almeno per le mie conoscenze (ovvio ). Però ora voglio provare a togliere almeno qualche spazio e vedere di quanto diminuisce il peso.

Ma un file troppo pesante su cosa influisce?

Ecco è sceso a 8,32kb tolte le indentature (ehm sono lo spazio laterale giusto? io quello ho tolto) e qualche spazio di troppo e i commenti che avevo aggiunto tra /* commento */. E mi sono anche accorta che avevo ripetuto per tante regole il font-family, il colore del testo black e il carattere 13px che invece è già definito nel body.

vampiretta

@misterwo said:

Se non hai capito o mi son spiegato male dimmelo...ok?
Quello che tu dici l'ho capito, però non mi è chiaro come linkare due css nella stessa pagina.

Io ora ho questa dicitura
<link rel="stylesheet" type="text/css" href="stile.css">

Per aggiungerne un altro scrivo

o lo devo aggiungere al css stile.css?

Non mi è chiaro questo passaggio!! :?:?

misterwo

ciao!
nella tua page fai l'import...

e all'interno del file css stile_pagine.css metti @import url(stile.css);

vampiretta

Grazie misterwo, domani provo, son curiosa, potrebbe tornarmi molto utile.

vale76

@Vampiretta said:

Ecco è sceso a 8,32kb tolte le indentature

invece il mio è sceso troppo poco.. da 10.794 a 10.216
sto cercando di eliminarne qualcuna, ma non è semplicissimo..

toglietemi una curiosità: c'è veramente differenza tra lo scrivere:

[HTML].testo{
color:#cc9;
font:1.25em Verdana,"Trebuchet MS", Helvetica, sans-serif;
}[/HTML]

e

[HTML].testo{
font-color:#cc9;
font-size:1.25em;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}[/HTML]

?

karedas

Bè risparmi in byte essendoci più testo eheh

vale76

@karedas said:

Bè risparmi in byte essendoci più testo eheh
quindi meglio la forma abbreviata?

karedas

Bè io la uso spesso anche perchè lo vedo troppo pesante dover dichiarare duecento righe di attributi. Pensando tipo al font come al border o al background. Dovrei occupare posto infinito quando posso riassumere tutto in una riga.

vampiretta

Io invece per alcune cose se non vado a capo e le esprimo singolarmente mi lego in maniera incredibile!

Però voglio provare anche io le forme abbreviate! Finisce che a forza di fare prove, distrucco il css.

karedas

L'importante è che appunto state attento alle dichiarazioni.
Ad esempio nella sintassi dell'attributo "background" un conto è mettere così:

background:url('immagini/foto1.jpg')no-repeat top center;

un conto è mettere così:

background:url('immagini/foto1.jpg') no-repeat top center;

Cosa cambia direte voi?
IE non comprende a pieno il primo caso necessitando di uno spazio tra i vari parametri (in questo caso no-repeat deve staccarsi dalla parentesi).
E' un errore che spesso fanno in tanti.

vampiretta

@misterwo said:

ciao!
nella tua page fai l'import...

e all'interno del file css stile_pagine.css metti @import url(stile.css);
Ehm ho provato a fare così, ma non c'ho capito molto e non mi funziona.

Ma per mettere due css nella stessa pagina che hanno nomi di classi e id etc completamente diverse non posso scrivere:
<link rel="stylesheet" type="text/css" href="stile1.css">
<link rel="stylesheet" type="text/css" href="stile2.css">

E' sbagliato? Io ho provato e mi funziona, ma non so se è corretto sinceramente.