[css]Classes met spaties

[SinergyX]

Hopelijk is de titel beetje duidelijk,

Een collega van mij is begonnen met een beetje website design, wat tot heden redelijk ging.
Ik had hem eerder het advies gegeven de meeste eigenschappen van divs, tables etc via CSS te laten gaan, overzichtelijk en makkelijk aan te passen. Hij weer verder aan de slag, maar nu stuurt hij mij toch de broncode met de vraag om te kijken wat er fout gaat.

Direct zag ik dit nonstop langs komen:

code:

<div class="box bovenin">
<div class="tabel rechterkant">
<div class="overzicht middel">

In zijn CSS had hij onder andere:

code:

.box bovenin {
BACKGROUND: url(band.gif) no-repeat;
}

Resultaat: op de niet-spatie Classes na, werkt heel de CSS dus niet.

Zover ik weet van CSS, kan een spatie in een class toch helemaal niet? Snel doorgekeken lijkt dit op zo'n manier op zijn hele website door te gaan, totaal 17 html pagina's. Wat kan ik nu het beste hieraan doen? Een zoek/vervang functie lijkt me niet mogelijk, elke class heeft weer zijn eigen fijne naam, het handmatig gaan doen heb ik totaal de tijd niet voor. Of kan ik middels een "-teken (%20 werkt niet) alsnog alle classes in CSS laten werken.

Zoeken op spatie+class op tweakers kom ik vaak de combo wel tegen in een post, maar niet specifiek een spatie in een class-id. Ook google (space+class) komt met varianten.

Of toch maar terug sturen en hem maar alles handmatig laten vervangen?

[Pkunk]

wat je doet met een spatie is gewoon 2 classes zetten

code:

.box{
BACKGROUND: url(band.gif) no-repeat;
}

en

code:

.bovenin{
BACKGROUND: url(band.gif) no-repeat;
}

is dan hetzelfde

[ Voor 65% gewijzigd door Pkunk op 13-12-2006 19:12 ]

[Verwijderd]

Hoe kan je er tijdens de ontwikkeling nou niet achterkomen dat dat niet werkt

[T-MOB]

De spatie geeft inderdaad aan dat er twee classes worden gezet. De makkelijke oplossing:

Cascading Stylesheet:

.box.bovenin {
BACKGROUND: url(band.gif) no-repeat;
}

[Icelus]

Underscore gebruiken:

Cascading Stylesheet:

.box_bovenin {
BACKGROUND: url(band.gif) no-repeat;
}

[OkkE]

Spaties in classes kan inderdaad niet. Met een spatie kan je verschillende classes aan een element hangen, zoals Timlog al aangeeft.

Een P die bedoeld is als error bericht moet dienen:

HTML:

<p class="msg error"></p>

Cascading Stylesheet:

.msg { background:gray; }
.error { border:2px solid red; }
.note { border:2px solid blue; }

Dit zorgt er voor dat je P zowel een grijze achtergrond krijgt als een rode border. Je kunt nu eenvoudig alle "berichten" een bepaalde stijl geven, en met de .error & .note de verschillen aanbrengen.

Ik zou alleen geen foolproof oplossing weten om die classes nu nog aan te passen. Lijkt me dat je het allemaal moet doorlopen. Maar wat Smith ook zegt; hoe kan 't dat je er pas aan 't einde achter komt.. als je CSS niet (volledig) werkt, zie je dat toch gelijk.

-- edit --

@T-MOB;
Dat zou ik zeker niet aanraden. Vooral voor mensen die nog niet zo veel met CSS hebben gewerkt zal dat erg verwarrend kunnen zijn.

Cascading Stylesheet:

.box .bovenin{ /* deze stijl is voor een class .bovenin _in_ een class .box */ }
.box.bovenin { /* deze stijl is voor de class .box.bovenin */ }

Lijkt imo te veel op elkaar. Je moet toch de classnames aanpassen, zou ik eerder kiezen voor een - of _ of nog beter, gewoon de spatie er uit.

[ Voor 23% gewijzigd door OkkE op 14-12-2006 09:17 ]

[Michali]

Het los definiëren kan (zoals Timlog doet), maar dat geeft misschien niet het gewenste effect. Op die manier kun je per class apart een stijl definiëren welke dan beiden toegepast worden. Als je echter een stijl wil definiëren die aan elementen met beide classes worden toegekend, dan is de oplossing van T-MOB de juiste.

In dit geval zou ik even kijken naar wat de bestaande styles al zijn, of even navragen wat een class betekent. Als je de box bovenin echt alleen via .box.bovenin kunt bereiken, dan kun je die definitie gebruiken, anders gewoon .box los en .bovenin laten voor wat het is (of andersom natuurlijk).

[SinergyX]

Duidelijk dus dat ik nog niet zoveel van CSS weet dan dat ik had gedacht

Zojuist mijn collega gesproken, het verhaal zo uitgelegt. Met wat excuses 'kon niet uploaden' en 'werkte hier wel' beweerde hij dat het opeens niet meer werkte, maargoed. Een aantal CSS onderdelen deden het wel (href kleuren, background etc, mischien daarop blind gestaard dat het werkte). Ik heb het advies gegeven om simpel de spaties eruit te halen of een _ te gebruiken (boxonder tabelrechterkant etc) om het direct te laten werken, maar anders toch verkorte _enkele_ namen te gaan gebruiken en te vervangen (hij gebruikt EditPro welke zoek&vervang in bestanden kan doen).

Bedankt allemaal

[ Voor 6% gewijzigd door SinergyX op 14-12-2006 09:47 ]

[crisp]

note dat dit:

Cascading Stylesheet:

.class1.class2 {}

bugged in IE < 7