Kolmannessa esimerkissäsi on kyse yksinkertaisten valitsijoiden ketjuttamisesta descendant combinatorin avulla, joka on ikään kuin epämääräisempi ja hitaampi versio child combinatorista. Jos et tue IE6:ta, kannattaa sen sijaan käyttää mieluummin child-kombinaattoria.

Esimerkiksi #twitter p vs #twitter>p. Ensin selain kerää kaikki p-elementit, sitten se menee yhden tason ylemmäs ja tarkistaa, onko tällä elementillä id ”twitter”. Jos ei ole, selain pysähtyy tähän, jos olet käyttänyt child-kombinaattoria. Jälkeläiskombinaattorilla se matkustaa aina juurisolmuun asti (jos se ei löydä matkalla jotain #twitter-elementtiä). Väärät positiiviset tulokset ovat siis aina hieman hitaampia laskevalla kombinaattorilla.

Suurempi ongelma laskevassa kombinaattorissa on sen epätarkkuus, joka lisää törmäysten mahdollisuutta. Sivuvaikutuksena mielivaltaisesti sisennettävien rakenteiden luomisesta tulee paljon hankalampaa.

.container #twitter p on myös liian spesifinen. Haluatko todella, että p elementit #twitter:n sisällä näyttävät erilaisilta, jos #twitter ei ole .container:n sisällä?

Toiseksi ongelmaksi muodostuu myös se, että .container on paikka eikä osa rakennetta. Joten joo… tuo sääntö ei ole uudelleenkäytettävissä.

Skaalautuva CSS = uudelleenkäytettävä koodi = luokat. Id-pohjaiset säännöt eivät määritelmällisesti ole uudelleenkäytettäviä.

Leave a comment

Sähköpostiosoitettasi ei julkaista.