Classer och användningsområde?

När jag gjort en class så har jag gjort det för att formatera vissa ord i en tagg. Exempelvis inom en <p>.

.greenbakgrund {
	background-color: #00CC99;
}

När kan jag mer använda det?

Tack på förhand!

<p>Detta är <span class="greenbakgrund">ett</span> exempel.</p>

Jo men vad kan jag mer använda classer till mer än att formatera vissa ord med en bakgrund som är grön? :-)

Gick vi inte igenom det nyss här och här? :)

Det är även vanligt att man använder css-klasser för att lägga in beteende-"hooks" för Javascript. En del tycker att koden blir ren och prydlig medan andra tycker att det är fel eftersom css-klasser är till för det utseende och inte beteende. De använder det ändå eftersom det egentligen inte finns nåt annat bra alternativ. Hur som helst, går man tillbaka och jämför med hur koden såg ut för en 5-10 år sedan inser man att det är bättre - oavsett om det är rätt eller fel.

dAEk skrev:

andra tycker att det är fel eftersom css-klasser är till för det utseende och inte beteende.

class="" är inte "css-klasser" (lika lite eller mycket som de är "js-klasser") och har lika lite (eller mycket) med utseende att göra som med beteende.

HTML4 föreslår att id="" har en roll för att användas för både skript och för stilmallar, medan class="" inte föreslås att användas för skript; det har förmodligen att göra med att det inte fanns någon DOM API för class="" när HTML4 skrevs, vilket det finns idag (eller snart -- i Firefox 3 och Opera 9.5): getElementsByClassName().

zcorpan skrev:

class="" är inte "css-klasser" (lika lite eller mycket som de är "js-klasser") och har lika lite (eller mycket) med utseende att göra som med beteende.

Ah, my bad. Kollade på w3 och det stämmer ju det du säger - precis som vanligt. :bire

Jag har lite funderingar...

Är man flera som jobbar på samma projekt och någon får för sig att döpa om en css-klass måste man dubbelkolla javascripten också, så att det inte ligger nån hook där. Det blir lätt rätt jobbigt om det är en webbapplikation, där det oftast finns en massa js, det handlar om. För det mesta går det går det att undvika den här typen av problem genom att använda verb för beteendenklassnamn (draggable, sortable, movable) och substantiv för presentationen (content, article, preamble, footer). Det känns ändå som att man kan få problem förr eller senare, eller är det bara jag? Det är ju t.ex. lätt att falla dit och tänka att alla "draggables" ska ha en annan muspekare och så skapar man en css-klass med samma namn, bara för att ta ett exempel.

Finns det bättre sätt än att tänka i verb och substantiv? Hur gör ni andra?

Tycker jag klarar mig långt med att alltid ha gemener i css och blanda in en versal i andra classer typ greenback och greenBack om de skulle heta samma...

Vilken av klasserna "greenback" och "greenBack" hör till js resp. css? Varför det, och varför inte tvärtom? Det känns inte helt logiskt, eller?

Vad gäller naming så tycker jag att det jag skrivit tididgare inför en redesign fortfarande har bäring :) :

Naming standard for all classes and id:s:
- Firstletter lowercase, second to N name Uppercase
Examples:
- main
- mainContent
- mainContentOffer

- Use generic, semantic names when naming classes and id:s
Correct:
- .fullLength, #productCategory : no properties (color, sizes in px) described in name, only function or placement

Not Correct:
- .orangeLong, .wide318 : color and size included in in name, what if it should change to be blue instead or set to 400px?
---------

Dessutom, jag rekommenderar att ge ett vettigt prefix på allt:
t ex om din firma heter berras webb; lägg till bw före.
Den dag du ska jobba med något större företag/partnerskap/white label osv inser du ofta snabbt att .content eller .menu riskerar att kollidera med det omgivande ramverket, bwMenu är lättare att hantera i s f... ;)