Spatie tussen element en waarde nodig?

[jvgenderen98]

Ik heb een vraag:
Kan ik het beste een spatie tussen element-waarde (bijv. background-color: en blue plaatsen, of juist niet?

Alvast bedankt voor het antwoord.

 

[csshunter]

Hoi Joey,
Voor het resultaat maakt het niet uit: het mag/kan op beide manieren:

#ideetje1 {background-color: blue;}
#ideetje2 {background-color:blue;}

Ikzelf zet er altijd een spatie tussen, dat leest wat makkelijker.

Met vriendelijke groet,
CSShunter

 

[jvgenderen98]

Hallo CSShunter, bedankt voor je antwoord.

 

[michaelbeersnl]

Dit maakt helemaal niks uit wat CSSHunter zegt het is meer een performance kwestie als je css bestanden heel groot zijn. Door die spatie krijg je gewoon minder karakters dus laad je bestand sneller net als dat je bijv. de kleurcode #FFFFFF; voor white vervangt omdat dit 2 karakters minder zijn per kleur.

 

[csshunter]

Inderdaad, maar je moet wel een heel supergroot stylesheet hebben voordat het echt te merken zal zijn in snelheidswinst.

Neem bv. dit stylesheet van ca. 430 regels: ongecomprimeerd-style.css (voor michael niet onbekend).
Dat is 8,7kB groot. *)

Laat je de spaties achter de dubbele punt hierin weg, dan wordt het deze spatieloos-style.css van 8,5kB. Winst: 0,2kB of ca. 2%.

Je kan ook nog verder gaan: alle andere overbodige spaties eruit, geen commentaarregels, geen inspringen, geen nieuwe regels, enz.

• Dat kan je met een compressie-tool doen, bv. de CSS Compressor van cssdrive.com.

Zet je die op "Super Compact", dan wordt het één hele lange regel, zoals de minified versie van jQuery e.d.
Resultaat is deze supercompact-style.css van 6,9kB.
Winst t.o.v. het origineel: 1,8kB. - Dat is nog steeds niet veel.

Maar een pagina heeft niet alleen css. Er is de html pagina-code, er zijn images, en vaak andere toebehoren als javascripts.
Stel dat een pagina al met al 300kB nodig heeft (dan ben ik aan de zuinige kant **), dan is de winst bij een "schone start" dus 1,8/300kB = 0,6%.
Dat maakt de pagina niet echt veel sneller!
Bovendien: voor vervolgpagina's maakt het al helemaal niet uit; dan zit het css-bestand al in de cache bij de bezoeker, en hoeft niet opnieuw gedownload te worden.

Conclusie:
De performance-winst is doorgaans te verwaarlozen, en ik hou mijn spaties, commentaarregels, inspringingen en nieuwe regels er lekker in.

• En mocht het ooit nodig zijn een css-bestand te comprimeren, dan bewaar ik de ongecomprimeerde versie heel goed!
• Die is tenminste overzichtelijk: daarin weet je waar je zit en wat je doet bij aanpassingen. Een nieuwe gecomprimeerde versie voor op de server is daarna weer gauw gemaakt.

Met vriendelijke groet,
CSShunter

PS: Veel meer snelheidswinst valt meestal te halen uit optimaliseren van de images. Zie bv. hier.

=======
*) Alle bestandsgroottes op de server.
**) Deze helpmij-pagina soupeert zo'n 250kB, maar er zitten niet zo veel / geen grote images bij.

 

[Naarling]

Maar een pagina heeft niet alleen css. Er is de html pagina-code, er zijn images, en vaak andere toebehoren als javascripts.
Stel dat een pagina al met al 300kB nodig heeft (dan ben ik aan de zuinige kant **), dan is de winst bij een "schone start" dus 1,8/300kB = 0,6%.
Dat maakt de pagina niet echt veel sneller!

Je kunt je HTML en javascript natuurlijk ook comprimeren (kijk maar eens naar de broncode van google.nl, da's één grote brij). Maar, zoals je zegt, de winst is minimaal en de bezoeker zal er weinig tot niets van merken. Het heeft wel zin als je site een enorm aantal bezoekers heeft en je het dataverbruik wat wilt drukken.

 

[jvgenderen98]

Iedereen bedankt voor de reacties.