Tijden veranderen
css vragen
Maar als ik die class emphasize zou noemen, en in een h1 moet ie rood worden, maar in een h2 blauw? Hoe doe je dat dan? Of moet ik dan classes combineren? Bijv. <span class="emphasize red">?
En wat houdt dat BEM in?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<p class="notice--red">Rood</p>
<p class="notice--yellow">Geel</p>
.notice
{
border: 1px solid $color;
font-color: $color;
}
<p class="notice--yellow">Geel</p>
.notice
{
border: 1px solid $color;
font-color: $color;
}
En dan zonder SASS en/of LESS etc?
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<p class="notice" data-color="blue">Blauw</p>
<p class="notice" data-color="rood">Rood</p>
<style>
.notice{
border: 1px solid attr('data-color', 'color');
color: attr('data-color', 'color'); /* font-color bestaat niet :) */
}
</style>
<p class="notice" data-color="rood">Rood</p>
<style>
.notice{
border: 1px solid attr('data-color', 'color');
color: attr('data-color', 'color'); /* font-color bestaat niet :) */
}
</style>
BEM staat voor Block Element Modifier. Je kunt het zien als OO denken in CSS (maar dan stukken makkelijker).
Een block is het basis object. Bijv. post:
Code (php)
1
<article class="post"></article>
Elk block kan elementen hebben. Elementen zijn children/descenants. Bijv: (om elementen aan te geven gebruik ik altijd een dubbele underscore)
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<article class=post>
<h1 class=post__heading>Hello World!</h1>
<time class=post__date>...</time>
<p class=post__excerpt>Hello foobar...</p>
</article>
<h1 class=post__heading>Hello World!</h1>
<time class=post__date>...</time>
<p class=post__excerpt>Hello foobar...</p>
</article>
Een block/element kan ook een modifier hebben. Het kan zich in sommige condities anders gedragen. De block class heeft dan alle algemene CSS en een modifier heeft element specifieke CSS. Bijv:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<article class="post post--tutorial">
<!-- ... -->
</article>
<article class="post post--news">
<!-- ... -->
</article>
<!-- ... -->
</article>
<article class="post post--news">
<!-- ... -->
</article>
Een voorbeeld kan bijv. afbeeldingen zijn: http://jsbin.com/eqaxop/1/watch
Je kan ook eens in de broncode van mijn website (http://wouterj.github.com/ ) kijken, dan zie je ook heel wat BEM terug.
Even wat vragen:
1) Is BEM een (programmeer)taal, of is het meer een soort van interpretatie (we doen het op zus en zo'n manier)
2) Wat is excerpt? (google translation geeft 'uittreksel' als vertaling)
3) Wat is het verschil tussen een element als post__heading en een modifier als post--tutorial?
4) Je gebruikt soms wel en soms niet quotes. Ben jij niet van de quotes?
Quote:
Staan er bewust 2 spaties tussen post en post--tutorial?
Ja, dat maakt het wat makkelijker leesbaar dat het gaat om 2 verschillende classes (vind ik in elk geval). En het is deel van de CSS coding standard die ik gebruik.
Quote:
1) Is BEM een (programmeer)taal, of is het meer een soort van interpretatie (we doen het op zus en zo'n manier)
Interpretatie, techniek. Hetzelfde als OO in PHP
Quote:
2) Wat is excerpt? (google translation geeft 'uittreksel' als vertaling)
Een intro ofzoiets. Zeg maar dat kleine stukje tekst die bij elk nieuwsbericht op de homepage van deze website staat.
Quote:
3) Wat is het verschil tussen een element als post__heading en een modifier als post--tutorial?
.post__heading is een element. Het is dus een totaal andere code. Het enige verband die .post en .post__heading hebben is dat .post__heading altijd in .post voor moet komen. Voorbeeldje: http://jsbin.com/apurib/1/watch
.post--tutorial is gewoon een .post waarin iets speciaals is aangepast. Zo kan .post bijv. een grijze border-color hebben en .post--tutorial een rode: http://jsbin.com/apurib/2/watch
Quote:
4) Je gebruikt soms wel en soms niet quotes. Ben jij niet van de quotes?
Nee, quotes kosten typwerk en het is onnodig. Het staat ook veel 'hackier' als je ze niet gebruikt. Alleen met sommige tekens (zoals de spatie) is het verplicht om quotes te gebruiken. Zie ook http://MothereffingUnquotedAttributes.com
"Het staat ook veel 'hackier' als je ze niet gebruikt. " Haha, ben jij van het hackier? Dat wist ik niet :)
Quote:
post__heading had je dus ook bijv. post__h1 kunnen noemen?
Ja, behalve dat .post__heading erg generiek is en dus ook op een h5 kan staan en .post__h1 je bijna verplicht hem op een h1 element te zetten
Quote:
Haha, ben jij van het hackier? Dat wist ik niet :)
Code moet er mooi uit zien, daar ben ik zeker van :)
Maar hackier en mooi... da's toch niet hetzelfde ;)))
Code (php)
1
2
3
2
3
tbody tr:firstchild td .aclass {
border-top: 1px solid #1235BB;
}
border-top: 1px solid #1235BB;
}
Is beste manier?
Gewijzigd op 27/03/2013 18:51:40 door Ger van Steenderen
Maar, ik deed het altijd andersom (de class voorop) en als ik dan de td weg liet kreeg ik geen border (IE 10).
Heeft dat dan met de volgorde te maken?
tbody tr:first-child td .aclass
Betekend:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<tbody>
<tr>
<td>
Hello <span class=aclass>world</span>!
</td>
</tr>
</tbody>
<tr>
<td>
Hello <span class=aclass>world</span>!
</td>
</tr>
</tbody>
tbody tr:first-child .aclass
Kan ook nog dit betekenen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<tbody>
<tr>
<td class=aclass>
Hello world!
</td>
</tr>
</tbody>
<tr>
<td class=aclass>
Hello world!
</td>
</tr>
</tbody>
tbody tr:first-child .aclass td
Is totaal fout, dat kan nieteens :)
tbody .aclass tr:first-child
is ook fout.
tbody tr:first-child td.aclass
betekend:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<tbody>
<tr>
<td class=aclass>
Hello world!
</td>
</tr>
</tbody>
<tr>
<td class=aclass>
Hello world!
</td>
</tr>
</tbody>
Code (php)
1
2
3
2
3
tbody tr:last-child td.ranking {
border-bottom: 1px solid #007700;
}
border-bottom: 1px solid #007700;
}
Geeft geen border onder de tabel.
Ook zonder de td prefix niet, en ook niet met een spatie
Dit werkt wel:
Code (php)
1
2
3
2
3
.ranking tbody tr:last-child td {
border-bottom: 1px solid #007700;
}
border-bottom: 1px solid #007700;
}
Wouter J op 27/03/2013 19:26:05:
tbody tr:first-child .aclass td
Is totaal fout, dat kan nieteens :)
tbody tr:first-child .aclass td
Is totaal fout, dat kan nieteens :)
Waarom niet?
De eerste kind van de tr moet class .aclass hebben en daar de TD van.
Dus:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<tbody>
<tr class="aclass">
<td>Mt CSS</td>
<td>Zonder CSS</td>
</tr>
</tbody>
<tr class="aclass">
<td>Mt CSS</td>
<td>Zonder CSS</td>
</tr>
</tbody>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<tbody>
<tr>
<een-of-ander-element class=aclass>
<td>...</td>
</een-of-ander-element>
</tr>
</tbody>
<tr>
<een-of-ander-element class=aclass>
<td>...</td>
</een-of-ander-element>
</tr>
</tbody>
En dat <een-of-ander-element> bestaat niet :)
tbody tr:first-child betekend het eerste tr child van tbody, niet het eerste child van tr.