Gode vaner i CSS

[TheClown]

Hei diskusjon.no.

 

Jeg begynte nylig å jobbe 100% stilling som programmerer, som jeg liker veldig godt. Vi lager for det meste nettsider. Ettersom jeg er 19 år, og kommer direkte fra videregående er jeg 100% selvlært. En av de tingene jeg aldri har vært spesielt flink i er CSS. Jeg har riktignok lært meg veldig mye de siste 2 månedene, og jeg mesterer det greit.

 

Men jeg syntes css-koden min ser rotete ut. Kan noen forklare meg noen enkle "gode vaner" i css?

 

Først og fremst lurer jeg på når man bruker classes, og når man bruker id. Jeg vet at id kun kan eksistere et sted, men classes brukes flere steder. Jeg forstår også når man bruker classes og id'er med js, men hvis du har "holder-divs" som f.eks slik:

<div class="wrapper"><div class="header"><h2>Headertekst</h2></div></div>

eller

<div id="wrapper"><div id="header"><h2>Headertekst</h2></div></div>

 

Hva er best?

 

Og jeg pleier å skrive cssen slik:

.wrapper .mainWrapper .main .kjopeWrapper .selgeboligWrapper .selgeboligTekst a

 

Er det en god vane å skrive full-path til elementet, eller skal jeg holde meg til unike class-navn og skrive bare det?

.selgeboligTekst a

 

Slik?

 

Andre gode tips tas også godt imot

[torbjørn marø]

På de div'ene dine der er det naturlig å bruke id, ikke class.

 

Og det er ikke normalt/naturlig å bruke full-path som du sier i css'en slik jeg forstår eksempelet.

[Faller]

Gratulerer som ansatt etter videregående

 

Ang CSS så vil jeg anbefale å lese på denne siden.

Der står det mye god informasjon om CSS og andre ting som html, html5, css3 osv. Det står en del som syntaks, og oppbyggning.

 

 

Mvh Faller

[TheClown]

Takk for svar begge to.

 

torbjørn: hvorfor er det mer naturlig å bruke id der, i stede for class?

Og når er det man skriver full path i css?

 

Faller: jeg har mer eller mindre memorisert samtlige av w3schools sine artikler. Men de gir meg ikke noe svar på disse spørsmålene (i allefall ikke som jeg har kommet over).

Endret 19. oktober 2011 av TheClown

[huf]

hvorfor er det mer naturlig å bruke id der, i stede for class?

 

Pga nettopp det du skriv; at id skal brukast kun ein gong, og du har då vanlegvis berre ein wrapper-div på ei side

 

Id på single element, class der du bruker fleire.

[torbjørn marø]

torbjørn: hvorfor er det mer naturlig å bruke id der, i stede for class?

Og når er det man skriver full path i css?

huf svarte på det første.

 

Når det gjelder det andre så må noen korrigere meg om jeg sier noe feil, men poenget er at du bruker det du kaller full path til å begrense. Ta f.eks.

 

.foo a {}

 

Her sier jeg at alle anchor tags med class foo (eller innenfor class foo) skal ha en viss stil. Men her

 

.foo .bar a {}

 

sier jeg at alle anchor tags med class foo og bar (eller innenfor class foo og bar) skal ha en viss stil. Hvis alle anchor tags innenfor foo uansett skal ha stilen, selv om de tilfeldigvis også er innenfor bar, så trenger jeg ikke (eller skal jeg ikke) spesifisere bar.

 

Skjønner?

 

Du bruker altså mer spesifike regler hvis du har behov for å skille dem fra andre regler. I utgangspunktet lager du reglene så enkle som mulig.

Endret 19. oktober 2011 av torbjørn marø

[agm]

Hvilke elementer som har id og hvilke som har class må du se fra et objektperspektiv, og ikke tenk på CSS her. Det kan være greit å dele en side inn i f.eks. topp, innhold og bunn. Det er da logisk at disse gis hver sin ID. Skal du senere f.eks. angi farge på lenker, jobber du deg fra ID og nedover i CSS selektoren.

 

#topp a { }
#innhold .nyhet a {}
#bunn li a {}

Wrappere er det ikke vits å ta med i de fleste tilfeller.

 

Når det gjelder CSS selektorene, så bør du være sparsommelig, som Torbjørn sier. Det vil ta lengre tid for nettlesere å lese et stilsett med overlast av selektorer, som vil merkes når stilsettene får en viss størrelse. I tillegg er det praktisk for egen del å holde seg til et nødvendig minimum både for å få oversikt og for lettere å jobbe med spesifisitet.

 

Et annet poeng Torbjørn er inne på, handler om spesifisitet (dvs. prioritering).

 

Hvis et objekt har både en ID og en Class, vil CSSen du angir i #ID ha høyere spesifisitet enn .class. I tillegg vil en "full path" som du kaller det gi høyere spesifisitet enn om du bare angir class. Men det er ikke noe poeng i å legge inn en "full path". Hold deg til rundt 3 nivåer. Mer om spesifisitet kan du lese hos Smashing Magazine.

 

Lykke til!

Endret 20. oktober 2011 av agm

[Occi]

Wrapper er noe tull fra ferdigedesign, og er absolutt ikke vits å ha med i 99% av tilfeller, dette pga. du kan rett og slett bruke body-tagen til akkurat det samme! Om du derimot har noe mer utover en wrapper inni body, så er det strengt talt ikke lenger en wrapper..

 

Når det gjelder oppsett av css så er det kun en regel som gjelder, og det er rett og slett KISS (Keep It Simple Stupid). Om det er flere elementer (tag-blokker) som har felles CSS, så da putter du de selvfølgelig på samme linje.

 

Angående id vs class, så svarte du allerede på det i din egen post. Bruk id der et element kun forekommer en gang, og class når det forekommer flere ganger. Jeg pleier også å bruke class om et element forekommer kun en gang på en side, men flere ganger på flere forskjellige sider og det ikke er en del av HTML-struktureringen (dvs. div id=header o.l.). Dette er bare for min egen del og jeg syns det gir mer mening.

 

Forstå også prioritet (eller spesifisitet som agm kaller det). Ikke bruk full path om en id holder (igjen, KISS).