Rahinaa.biz / Lehti / Masiivinen CSS-tiedosto pienemmäksi?

Masiivinen CSS-tiedosto pienemmäksi?

Julkaistu: 10. elokuuta 2008 Kategoria: yleinen

Toisinaan CSS -muotoilut venyvät todella pitkiksi, ainakin siltä vaikuttaa kun katsastelee monien sivustojen CSS-tiedostoja. Ne ovat pitkiä, jokseenkin jopa todella outoja, mutta harmittavinta on, että ne voisivat yleensä olla jopa puolet pienempiä; optimoimaton CSS-tiedosto voi olla verrattavissa aivokuolleeseen lihaskimppuun.

On aika yleistä jättää CSS-tiedostoon kaikenlaista rumaa lööperiä ja tavaraa jota ei oikeastaan tarvita mihinkään, kunhan sivusto toimii ja näyttää siltä miltä halutaan. Ja eihän siinä mitään vikaa ole, tosin olisi mukavaa leikata se käyttämätön tavara pois. Ensinnäkin se nopeuttaa sivun avautumista käyttäjälle, vähentää siirtokaistan kulutusta ja kolmannekseen se on niin pirun coolia.

Helppoa, paremminkin automaattista

Leikattavia kohtia tyylimäärityksistä löytyy paljon, jokaisen keissin ollessa erilainen. Pikkuisen käyttämällä järkeä ja/tai aputyökauluja, hoituu homma hetkessä. CSS-tiedoston tuplamäärityksien löytäminen ja optimointi kuitenkin on aika robottimaista ja helppoa.

Apuvälineitäkin, jotka tekevät pääpiirteittäin aivottomiman homman automaattisesti, on pilvin pimein; Niin asennettavasta softasta aina onlinetyökaluihin.

Muutama yleinen kaivoon tippuminen

Tarpeettoman tavaran lisäksi monissa tapauksissa löytyy turhia määrityksiä, kuten tilanteita jossa CSS:n kirjoittaja on päättänyt lisätä, joka hiton elementin määrityksiinsä, kuten esimerkiksi:

html body div#ensimmainen-div div#toinen-div ul#u-lista li#listaitem p#kappale a#linkki {
	text-decoration: none;
}

Jossain tapauksissa tuo voi olla helpommin luettavaa, ylemmällä ID:llä voi nostaa classin arvoa ja niin edelleen, mutta yleensä se kaikkien elementtien, ID:ein ja class:ien listaaminen ei ole se viisain lähestymistapa.

Joskus neljä on yksi ja kuusi kaksi

Suoltavaa on myös kirjoittaa kaikki tuplana. Esimerkiksi padding: 0 10px 0 10px;. Tämähän on tarpeetonta, sillä tuohan onnistuu vain kahdella numerolla jos tarvis on. Sama on värien kohdalla, koska monissa tapauksissa sen voi kirjoittaa kolmella numerolla kuuden sijaan.

Myös muualta voi leikata tavaraa

Myöskään täysin kaikkea ei tarvitse määrittää. Monet mm. määrittävät listansa seuraavasti:

ul {
	list-style: none;
}
ul li {
	padding: 2px;
}

Eli toisinsanoen listaavat sen listaelemtin eteen ul- tai ol-elementin. Tätähän ei kuitenkaan tarvita, right, sillä listathan aina tulevat olemaan siellä listassa. Ainoat tilanteet jossa tätä voidaan tarvita, ovat kun halutaan luoda ul:lle ja ol:lle listoille erilaiset ulkonäöt.

Yleisin yleinen nollaaja CSS-heppujen keskuudessa on tuttu all man:in tähti, eli seuraava:

* {
	margin: 0;
	padding: 0;
}

Tämän käytön jälkeen täytyy muistaa, että tuo oikeastikin nollaa ne marginaalit ja sisennykset. Kuitenkin tulee nähtyä CSS-filuja jossa tuonkin jälkeen on käytetty täysin tarpeettomia margin ja padding nollauksia eri elementtien kohdalla, aivan kuin pelosta että tuo päästää selaimen oletukset lävitsensä.

Yleistä on myös tuon nollauksen yleisen tähden sijasta käyttää nollausversiota, joka listaa kaikki elementit ja pseudot erikseen. Tällähän ei ole mitään muuta merkitystä kuin, että CSS-tiedosto on huomattavasti isompi.

Kommentointi suljettu [0] Tagit: ,

Tämän bloggauksen kommentointi on suljettu, sen oltua auki 10. elokuuta 2008 lähtien kuusi viikkoa.

Elämä on pääasiassa kahvia, taiteilua, ohjelmointia, musaa, tunteita, nauttimista, aurinkoa, kävelemistä, kokkaamista, elokuvia hitusella kauneutta, sekä vastakohtaista rumuutta.

© Copyright 2008 Jukka Svahn. All rights reserved. Sivun ylälaitaan