[share] handig: classes combineren

[Hangloozz]

zeg, waarschijnlijk weten de meeste dit al maar lijkt me toch handig voor de onwetenden (zoals ik, tot nu..)

je hebt dit style-block:

HTML:

<style type="text/css">
body{ font-family: Verdana, Arial; }

.wit{ color:#FFF; }
.rood{ color:#f00; }
.mijnkleur{ color:#ABCDEF; }

.size9{ font-size: 9px; }
.size10{ font-size: 10px; }
.size11{ font-size: 11px; }

.vet{ font-weight:bold; }
.cursief{ font-style: italic; }
</style>

dan kun je door de class-namen te combineren retelijk eenvoudig gemengde styles maken zonder daar aparte classes voor te hoeven definieren:

HTML:

<span class="size11 rood vet">dik rood in 11 pixels ;-)</span>

jaj, de guru's zullen dit vast wel weten maar er zijn vast peeps bij gebaat

[Willem]

Hmm is dit niet juist de reden waarom er classes zijn?

[Shagura]

ja ik zou ook niet weten hoe ik dat anders op ging lossen

[Verwijderd]

ik vinnum wel leuk...gelukkig heb ik meer verstand van flash.

[Verwijderd]

Probeer altijd wel om zo weinig mogelijk classes te gebruiken. Vaak kun je al met andere selectors een element 'bereiken'. Helaas is Internet Explorer hier nog wat in beperkt, maar dat gaat vanzelf nog wel komen natuurlijk.

Bovendien moet je proberen met een classnaam een functie aan te duiden, en niet teveel over de styling gaan vertellen. Anders kun je net zo goed inline styles gaan gebruiken.

Probeer dus niet classnames als 'rood' of 'size9' te bedenken, maar liever classnames als 'notice' of 'offtopic'.

[Rickets]

http://www.w3.org/TR/html401/struct/global.html#adef-class
Een URL ter ondersteuning

[Hangloozz]

ja ruk, waarom hebben jullie dat niet eerder tegen me gezegd dan?
Ik wist niet dat ik dat mocht combineren

* Hangloozz moet eens vaker nog meer vrije tijd opofferen om op zo'n onoverzichtelijke site als w3c rond te gaan hangen

Verwijderd schreef op 16 January 2003 @ 17:57:
Probeer altijd wel om zo weinig mogelijk classes te gebruiken. Vaak kun je al met andere selectors een element 'bereiken'. Helaas is Internet Explorer hier nog wat in beperkt, maar dat gaat vanzelf nog wel komen natuurlijk.

Bovendien moet je proberen met een classnaam een functie aan te duiden, en niet teveel over de styling gaan vertellen. Anders kun je net zo goed inline styles gaan gebruiken.

Probeer dus niet classnames als 'rood' of 'size9' te bedenken, maar liever classnames als 'notice' of 'offtopic'.

Kun je dit toelichten?
ik gebruikte juist allemaal aparte classes maar dat brengt een huge stylesheet met zich mee, neem aan dat je dat dus niet bedoelt..

[ Voor 63% gewijzigd door Hangloozz op 16-01-2003 18:02 ]

[Dark Blue]

Deze peep is er zeker bij gebaat! Ik wist namelijk echt niet dat dit kon (foei, ik had de CSS handleiding op w3c eens moeten doorlezen)...
Wat extreem handig!

Dit scheelt me een hoop css-geknutsel in de sites die ik maak die klanten zelf gaan bijhouden; ik vraag ze namelijk dan om een stukje code toe te voegen wat in de help file voorgekauwd staat en er dan hun eigen tekst tussen te zetten. Daarin leg ik ook uit welke klasse ze voor wat voor type tekst kunnen gebruiken. Maar nu kan ik gewoon zeggen 'je hebt deze kleuren, vet, cursief of vet_cursief, groottes dit dat en dat om uit te kiezen, zet er maar wat bij elkaar; weglaten maakt niet uit, dubbel zetten moet je niet doen, en de tekst komt precies in het stijltje dat jij wil.

Thnx for sharing!

[oh,when?]

Hangloozz schreef op 16 januari 2003 @ 18:00:

* Hangloozz moet eens vaker nog meer vrije tijd opofferen om op zo'n onoverzichtelijke site als w3c rond te gaan hangen

Of koop gewoon een goed boek

[ Voor 49% gewijzigd door oh,when? op 16-01-2003 18:03 ]

[Dark Blue]

Verwijderd schreef op 16 januari 2003 @ 17:57:
Probeer dus niet classnames als 'rood' of 'size9' te bedenken, maar liever classnames als 'notice' of 'offtopic'.

Oh, ja, dat is mijn tactiek nu, en ik vind dit (voor sites die ik toch niet zelf onderhou) een stuk makkelijker uit te leggen aan een doe-het-zelf-klantje

Hangloozz schreef op 16 januari 2003 @ 18:00:
ja ruk, waarom hebben jullie dat niet eerder tegen me gezegd dan?
Ik wist niet dat ik dat mocht combineren

* Hangloozz moet eens vaker nog meer vrije tijd opofferen om op zo'n onoverzichtelijke site als w3c rond te gaan hangen

Op wie reageer jij dan weer? Je spreekt jezelf in deze post tegen

[DeFeCt]

Dark Blue schreef op 16 January 2003 @ 18:03:
[...]
Op wie reageer jij dan weer? Je spreekt jezelf in deze post tegen

Ehm leg eens uit op welke wijze hij zichzelf tegenspreekt dan?

Hangloozz schreef op 16 January 2003 @ 18:00:
Kun je dit toelichten?
ik gebruikte juist allemaal aparte classes maar dat brengt een huge stylesheet met zich mee, neem aan dat je dat dus niet bedoelt..

Een classname met de naam red zal altijd iets impliceren, het mooie van css is juist dat je het op 1 plek aanpast en het in de hele site veranderd, als jij besluit dat je text blauw moet zijn dan voldoet je class name dus niet meer aan de verwachtingen, daarnaast is het handig als de classname het geen omschrijft wat het vorm geeft

[Hangloozz]

Dark Blue schreef op 16 januari 2003 @ 18:03:


Op wie reageer jij dan weer? Je spreekt jezelf in deze post tegen

nee, half W&G reageert met: been there, done that, doin' it tomorrow..

en ik wist van nix, moest er zelf achterkomen..

DeFeCt schreef op 16 januari 2003 @ 18:11:
Een classname met de naam red zal altijd iets impliceren, het mooie van css is juist dat je het op 1 plek aanpast en het in de hele site veranderd, als jij besluit dat je text blauw moet zijn dan voldoet je class name dus niet meer aan de verwachtingen, daarnaast is het handig als de classname het geen omschrijft wat het vorm geeft

het eerste deel ben ik met je eens.
Het laatste ook (voor rood is maar 1 betekenis: rood) maar ook weer niet; ik snap wat je bedoelt maar juist m'n voorbeeld dekt de lading goed wat betreft omschrijving.
Met 'rood' weet je direct wat er met de kleur gebeurt, met iets als ontopic ofzo moet je altijd weer terugkijken hoe je classnaming convention was als je een maand niet aan het project gewerkt hebt..

[ Voor 59% gewijzigd door Hangloozz op 16-01-2003 18:18 ]

[Verwijderd]

Hangloozz schreef op 16 januari 2003 @ 18:13:
[...]

nee, half W&G reageert met: been there, done that, doin' it tomorrow..

en ik wist van nix, moest er zelf achterkomen..

Iets vaker de purist Cheatah komen lastig vallen #devschuur kan ook helpen ...
Deze boodschapper van het CSS-evangelie krijgt iedereen bekeerd en helpt je ook nog eens aardig op gang met nette voorbeelden ...

[ Voor 3% gewijzigd door Verwijderd op 16-01-2003 18:20 ]

[Hangloozz]

ook nog in de IRC gaan rondhangen? nou nee, dan ben ik 7 urr aan het W&G'en en 1 uur voor de baas bezig per dag

En bekeren tot het CSS evangelie hoeft niet, want ik predik het zelf al...een jaar of 3.
Alleen wist ik dit gebruik van classes nog niet.

[Verwijderd]

Ik heb dat boek ook van Eric Meyer!! gisteren gekregen, dacht dat ik al veel wist van CSS, maar hij weet er toch wel iets meer vanaf (z'n website is ook zeer cool)
http://www.meyerweb.com/e...e/complexspiral/demo.html

beetje ot maar toch ook weer niet, Mozilla ondersteund nu ook de CSS 3 target selector! (vanaf gisteren in de nightlies)
Als je het in werking wil zien, zal je wel een heel recente versie moeten hebben, maar het effect is zeer cool.

http://daniel.glazman.free.fr/weblog/targetExample.html

hmm IE 7 waar blijf je? :

Blij dat Hangloozz zijn kennis deelt, dat maakt GOT weer een stukje beter, wou dat meer mensen van die handige tips achterlieten, maakt het zoeken naar een oplossing voor een mogelijk probleem weer wat makkelijker.

[ Voor 17% gewijzigd door Verwijderd op 16-01-2003 20:08 ]

[Verwijderd]

Erm.....hier heb ik wat stof overheen getrapt....geen links meer te lezen enzoo......schijnt 'illigaal te zien .'

-- /me zegt: Goede boeken zijn ook online te vinden

[ Voor 94% gewijzigd door Verwijderd op 16-01-2003 23:08 ]

[hobbit_be]

B-Top: helaas geen legale copieen zou het adress maar niet te veel doorgeven... ik ga alvast even 'telePorten'

[Verwijderd]

hoe illegaal is dit dan? Gewoon gegoogled met een zoekterm over flash arrays...geen crack...maybe hoort het niet online, maar ik vraag me de grens toch een beetje af...maar toch maar gewijzigd...

[ Voor 8% gewijzigd door Verwijderd op 16-01-2003 23:08 ]

[Bluestorm]

Ik wist 't ook niet... Maar eigenlijk zie ik 't nut niet zo heel erg, ja soms heb ik 't weleens met dingen als .menuItem en iets als .selected zou willen combineren... maar of 't nou veel uitmaakt of je class="menuItem selected" of class="menuItemSelected" neemt...

Of liever gezegd... een stukje content is toch zelfden van meerdere classen... en anders verzin je gewoon een nieuwe naam

[Clay]

mwah. Stel jij hebt iets nodig wat divjes naast elkaar zet, maar dat moet toevallig ook een 1 pixel border aan de linker kant hebben, dan ga ik iig niet een losse class maken die het 2e geval helemaal beschrijft, dan doe ik liever class="column borderLeft" dan "columnAndBorderLeft". Misschien dat het weten ervan ook de behoefte creert het te gebruiken
En het is het idd waard om eens wat op te zoeken over css 1, 2 en alvast 3, d'r kan zo ontiegelijk veel mee.

[Hangloozz]

Bluestorm schreef op 17 January 2003 @ 00:40:
Ik wist 't ook niet... Maar eigenlijk zie ik 't nut niet zo heel erg, ja soms heb ik 't weleens met dingen als .menuItem en iets als .selected zou willen combineren... maar of 't nou veel uitmaakt of je class="menuItem selected" of class="menuItemSelected" neemt...

Of liever gezegd... een stukje content is toch zelfden van meerdere classen... en anders verzin je gewoon een nieuwe naam

Nou op deze manier voorkom je dat je CSS-file uitgroeit tot een bestand van 20Kb waar allerlei vage classes in staan voor uitzonderlijke gevallen
Daarnaast heb ik regelmatig dat ik een half jaar later bij het updaten van een site echt niet meer weet welke class ik waar voor gebruikte; dan moet ik eerst weer de toepassing van die class ergens op de site opzoeken zodat ik naam kan overnemen.

Maar zoals door DeFeCt al gezegd realiseer ik me wel steeds meer dat teveel combineren de flexibiliteit niet ten goede komt.
Dan moet je nog door de hele site heen om je combi's te wijzigen

[Bluestorm]

Clay schreef op 17 januari 2003 @ 09:10:
mwah. Stel jij hebt iets nodig wat divjes naast elkaar zet, maar dat moet toevallig ook een 1 pixel border aan de linker kant hebben, dan ga ik iig niet een losse class maken die het 2e geval helemaal beschrijft, dan doe ik liever class="column borderLeft" dan "columnAndBorderLeft". Misschien dat het weten ervan ook de behoefte creert het te gebruiken

Echt overtuigen doet het me nog niet

wat is het verschil tussen:

<div class="column borderLeft"> ....</div>
<div class="column"> ... </div>

met als stylesheet

.column{ font etc }
.borderLeft { border:..}


of gewoon

<div class="columnBorderLeft"> ....</div>
<div class="column"> ... </div>

met als stylesheet

.column, .columnBorderLeft { font etc }
.columnBorderLeft { border:...}


dat scheelt echt niet zo vreselijk veel ruimte in je stylesheet. En erg veel vertrouwen in het hergebruik van de borderLeft klasse heb ik niet eigenlijk.

[Verwijderd]

Maar op zich doe jij het wel goed CSS staat voor Cascading Style Sheets, cascading is niks anders dan overervend, dat is precies wat gebeurt in jouw voorbeeld.

Ik gebruik het tegenwoordig ook vrij veel met verschillende linkjes, maar wederom door het achterblijven van IE kun je bijv. geen selectors gebruiken en dat zuigt nogal zwaar.

In een perfecte wereld is het zo simpel als dit:

HTML:

<style type="text/css">
a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 11px;
    color: #999;
}
a:link,a:visited,a:active {
    text-decoration: none;
}
a:hover {
    color: green;
    text-decoration: underline; 
}
div>a:link, a:visited, a:active{
    color: #ff0000;
    text-decoration: none;
}
div>a:hover {
    color: #0000ff;
    text-decoration: underline;
}
</style>

[ Voor 4% gewijzigd door Verwijderd op 17-01-2003 12:41 ]

[Clay]

je kunt wel selectors gebruiken, maar niet al te veel.

code:

.content {
   ...
}

.content a {
   ...
}

gaat bijvoorbeeld wel. En dat kan je dan evt met een class combineren om die missende > selector wat te "compenseren"

code:

.content a.linkje {
   ...
}

[Verwijderd]

Ik gebruik multiple classes voor het body element. Dit doe ik omdat ik een site heb die zich over twee domeinen strekt en ik maak gebruik van htc/xbl behaviors en die werken alleen binnen hun eigen domein.
Dus gebruik ik dit:
<body class="hccnet algemeen">
Om aan te geven dat dit het domein hccnet is en het document algemeen.
Zo kan ik voor ieder document zijn eigen stijleigenschappen gebruiken.
Ik weet nog dat ik eerst ontzettend zat te knoeien met expressions om het domein goed te zetten. Dat was echt een ellende en de boel werd er ook nog trager door. Ik wist al wel dat ik multiple classes kon gebruiken (en wonder boven wonder dat IE het ondersteunde), maar ik wist niet dat ik er op zo'n manier gebruik van kon maken.

He, ik vind die :target pseudo-selector echt gaaf. Ik vroeg me af, bestaat er in de css3 draft ook een pseudo-selector die zeg maar onthoud welke link (of ander element) het laatst is geklikt en dat je die dus kunt stylen?

[Verwijderd]

Verwijderd schreef op 17 January 2003 @ 15:28:
He, ik vind die :target pseudo-selector echt gaaf.

Ja idd die target pseudo selector is cool

Ik vroeg me af, bestaat er in de css3 draft ook een pseudo-selector die zeg maar onthoud welke link (of ander element) het laatst is geklikt en dat je die dus kunt stylen?

Hmm goeie vraag, ik zal eens eens kijken/rondvragen/proberen.