volgorde css
Om mijn css bestand overzichtelijk te houden, ben ik aan het experimenteren om alles binnen dat bestand op alfabetische volgorde te zetten. Dit "verplichtte" mij tot het onderstaande:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
p #INSTALL strong {
font-size:13px;
}
p strong {
font-size:15px;
}
font-size:13px;
}
p strong {
font-size:15px;
}
De I van INSTALL komt eerder dan de s van strong dus daarom moet p #INSTALL strong boven p strong staan.
Nu heb ik het volgende stukje html:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<p>
Blablabla<br>
<span id="INSTALL">
Blabla<br>
<strong>blablablabla</strong>.
</span>
</p>
Blablabla<br>
<span id="INSTALL">
Blabla<br>
<strong>blablablabla</strong>.
</span>
</p>
Nu had ik eigenlijk verwacht dat ie binnen de span de font-size van p strong zou pakken, ofwel 15px. Maar dat doet ie (gelukkig!) niet, hij houdt namelijk de font-size van 13px aan. Maar ik vraag me af hoe dat kan. Je zou toch verwachten dat ie de font-size van p strong (15px) zou pakken omdat die onderaan staat en de waarde van p #INSTALL strong overschrijft... tenminste dat dacht ik. Maar dat gebeurt dus niet en ik vraag me af waarom niet... iemand een idee?
Gewijzigd op 24/06/2011 10:22:52 door Ozzie PHP
Nog erg handing om CSS te begrijpen:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div class="container">
<h1>Hallo</h1>
<p>Wereld</p>
</div>
<div id="box" class="container">
<h1>Hallo</h1>
</div>
<h1>Hallo</h1>
<p>Wereld</p>
</div>
<div id="box" class="container">
<h1>Hallo</h1>
</div>
Nu zal de pagina eerst alles gaan invoegen die je selecteert met div/h1/p/div h1/div p enz.
Zodra dat gedaan is gaat hij naar de volgende stap. Hij bekijkt nu alle classes en gaat die style overrulen met de style die er stond van de eerste stap. Als dit klaar is komen de id's aan de beurt. Alleen style van de id's worden nu ingevoegd en dit wordt weer overruled.
Als je deze CSS code hebt:
Code (php)
1
2
3
2
3
div { width: 100px; height: 100px; background: red; }
div.container { background: green; }
div#box { background: blue; }
div.container { background: green; }
div#box { background: blue; }
Krijg je dat beide divs 100x100px zijn. En je krijgt dat de eerste div groen is en de 2e blauw. Zodra je nog een div zal toevoegen met geen class of id zal deze rood zijn.
Let wel op, 1 keer maakt de volgorde wel uit. Namelijk bij een anchor. De goede volgorde is :link :visited :hover :active te onthouden uit het ezelsbruggetje: LoVe HAte
Gewijzigd op 24/06/2011 09:47:47 door Wouter J
@Wouter: thanks voor de toelichting.
Als ik jou goed begrijp dan zou dit
Code (php)
1
2
3
2
3
div { width: 100px; height: 100px; background: red; }
div.container { background: green; }
div#box { background: blue; }
div.container { background: green; }
div#box { background: blue; }
of dit
Code (php)
1
2
3
2
3
div#box { background: blue; }
div.container { background: green; }
div { width: 100px; height: 100px; background: red; }
div.container { background: green; }
div { width: 100px; height: 100px; background: red; }
dus hetzelfde resultaat opleveren? Dat wist ik niet. Ik had verwacht dat alle div'jes nu rood zouden zijn. Dus eerst wordt gekeken naar de meest algemene property, in dit geval div. Daarna naar de classes (div.container) en daarna naar de id's (div#box). Correct?
Het valt me trouwens op dat jij div#box gebruikt terwijl je ook kunt zeggen #box (zonder div). Is daar een bewuste reden voor? En schrijf jij altijd de css naast elkaar in plaats van onder elkaar?
Zou je een voorbeeldje kunnen geven van dat LoVe HAte?
Ozzie PHP:
Als ik jou goed begrijp dan zou dit
[...code...]
of dit
[...code...]
dus hetzelfde resultaat opleveren?
[...code...]
of dit
[...code...]
dus hetzelfde resultaat opleveren?
Inderdaad.
Ozzie PHP:
Het valt me trouwens op dat jij div#box gebruikt terwijl je ook kunt zeggen #box (zonder div). Is daar een bewuste reden voor?
Ja, je moet proberen om met het selecteren van CSS zo precies mogelijk te zijn. Het maakt je CSS iets sneller omdat hij nu niet meer naar alle tags moet kijken, maar naar alleen de div tags.
Ozzie PHP:
En schrijf jij altijd de css naast elkaar in plaats van onder elkaar?
Ik schrijf de CSS altijd onderelkaar, maar voor 1 bepaalde propertie (zoals background: blue;) niet. Dus div#box zou ik zo laten de andere niet. Mijn CSS ziet er atlijd zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
div.container
{
width: 100px;
height: 100px;
background: blue;
font-family: 'Helvetica', Verdana, Arial, sans-serif;
font-size: 10pt;
}
{
width: 100px;
height: 100px;
background: blue;
font-family: 'Helvetica', Verdana, Arial, sans-serif;
font-size: 10pt;
}
Maar vaak werk ik met SASS ( http://www.sass-lang.org ). Hiermee maak ik altijd .sass file's aan die zonder {} en ; werken en dan compress ik de files altijd, zo krijg je een overzichtelijke handige code en wordt het voor de gebruiker snel gemaakt. Voor meer informatie over SASS raad ik deze tutorialreeks aan: http://net.tutsplus.com/sessions/mastering-sass/
Ozzie PHP:
Zou je een voorbeeldje kunnen geven van dat LoVe HAte?
Met LoVe HAte bedoel ik dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
a:link /* Alle anchor tags met een href */
{
text-decoration: none;
color: #333;
}
a:visited /* Zodra je al ooit op de pagina bent geweest */
{
color: #000;
}
a:hover /* Zodra je over een anchor tag gaat */
{
color: #000;
text-deocration: underlined;
}
a:active /* Zodra je op de link klikt */
color: #333;
text-decoration: underlined;
}
{
text-decoration: none;
color: #333;
}
a:visited /* Zodra je al ooit op de pagina bent geweest */
{
color: #000;
}
a:hover /* Zodra je over een anchor tag gaat */
{
color: #000;
text-deocration: underlined;
}
a:active /* Zodra je op de link klikt */
color: #333;
text-decoration: underlined;
}
Zodra je dit in een andere volgorde zet kan het onverwachte dingen doen.
Gewijzigd op 24/06/2011 15:58:01 door Wouter J
"Ja, je moet proberen om met het selecteren van CSS zo precies mogelijk te zijn. Het maakt je CSS iets sneller omdat hij nu niet meer naar alle tags moet kijken, maar naar alleen de div tags."
Is dat serieus? Dat wist ik echt niet... waar heb je dat gelezen? Ik wil er meer over weten. Da's goede informatie :)
Alhoewel ik op die pagina wel iets raars zie. Er staat:
*****
Use class selectors instead of descendant selectors.
For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:
ul li {color: blue;}
ol li {color: red;}
You could encode the styles into two class names and use those in your rules; e.g:
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.
*****
Dit is toch heel vreemd eigenlijk? Hier staat dus dat je een element beter een class kunt meegeven dan dat je het element aanspreekt via bestaande tags.
Je unordered list zou er dan dus zo uitzien:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
</ul>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
<li class="unordered-list-item">hier staat iets</li>
</ul>
En in je css zou je dan krijgen:
Code (php)
1
2
3
2
3
.unordered-list-item {
color:red;
}
color:red;
}
Maar op deze manier zit je toch je hele html te vervuilen door al die classes erin te zetten?
Zou het verschil met dit
Code (php)
1
2
3
2
3
ul li {
color:red;
}
color:red;
}
echt de moeite waard zijn om daar je html bestand voor te vervuilen?
Een descendant is zoiets als een kleinkind, een child is gewoon een kind.
<p>
Hier een tekst en <strong>dit moet dik en rood</strong>.
</p>
Ik zou dan zeggen:
p strong {
color:red;
}
maar volgens die site zou je dus dit moeten doen.
<p>
Hier een tekst en <strong class="p-strong">dit moet dik en rood</strong>.
</p>
.p-strong {
color:red;
}
Dat slaat toch nergens op? :-s
Toevoeging op 24/06/2011 23:50:59:
@Karl: wat bedoel je daar precies mee te zeggen?
ul li
li een child is van ul en hierbij:
div ul li
li een descant (kleinkind) van div is.
Wouter J op 25/06/2011 00:03:29:
Ik denk dat karl bedoelt dat hierbij:
ul li
li een child is van ul en hierbij:
div ul li
li een descant (kleinkind) van div is.
ul li
li een child is van ul en hierbij:
div ul li
li een descant (kleinkind) van div is.
Ja.
Je kunt daarmee rare resultaten krijgen bijvoorbeeld de volgende html:
<div><p>blaat</p><span>blup</span></div>
Met deze css selector:
div p
wordt ook op de span uitgevoerd, terwijl:
div > p
alleen op blaat wordt gedaan.
Verder kan het inderdaad wel zo zijn dat als een element een unieke class / id heeft sneller gevonden / gestyled kan worden. Als er gebruik wordt gemaakt van selectors die een element vinden betekend dat, dat de browser dat element helemaal expliciet moet opzoeken. Terwijl bijvoorbeeld al in de DOM mogelijk is om elementen met een bepaalde class of id te krijgen.
<p>
Hier een tekst en <strong class="p-strong">dit moet dik en rood</strong>.
</p>
.p-strong {
color:red;
}
Maar persoonlijk vind ik dat raar. Wat vinden jullie?
Hoe je het wel op kan vatten: als je element al een class heeft kan je net zo goed die gebruiken.
The Force:
De grootste performancewinst die je kan boeken is door zo weinig mogelijk requests uit te voeren en je HTML/CSS/JS bestanden zo klein mogelijk te houden (comprimeren, gzippen).
Een andere grote performance winst is door zo min mogelijk reflows te maken. Dit heeft voornamelijk te maken met JS. Een uitgebreide uitleg hierover: http://www.youtube.com/watch?v=q_O9_C2ZjoA
Maar goed, wat betreft dat css verhaal, ik ben nog maar net bezig met mijn framework, dus nu kan ik nog de "juiste" methode toepassen. En ik ben dus nog steeds benieuwd wat jullie zouden doen:
optie 1:
<p>
Hier een tekst en <strong>dit moet dik en rood</strong>.
</p>
p strong {
color:red;
}
optie 2:
<p>
Hier een tekst en <strong class="p-strong">dit moet dik en rood</strong>.
</p>
.p-strong {
color:red;
}
Ik heb een paar testen gedaan met 3 verschillende codes. De HTML was:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>CSS performance</title>
<style>
</style>
</head>
<body>
<p>
Some text here and then on an gegiven moment there is a <strong>strong tag</strong> and a <b>bold tag</b>.
</p>
</body>
</html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>CSS performance</title>
<style>
</style>
</head>
<body>
<p>
Some text here and then on an gegiven moment there is a <strong>strong tag</strong> and a <b>bold tag</b>.
</p>
</body>
</html>
Vervolgens heb ik de strong tag geselecteerd met:
p strong
p > strong
.p-strong
De resultaten waren dat de 2e het snelst is en de andere 2 ong. even snel zijn. Voor exacte gegevens hier de resultaten: http://i55.tinypic.com/nbu9o4.png
