Generaliser ikke stilsettet ditt

Som frilanser kommer jeg borti mange systemer som jeg bare skal lage supplement til og moduler. Ofte da må jeg også lage utseendet og ståbak CSS'en. Noen ganger kan selv de simpleste operasjoner bli kompliserte uten spesifikke selectors.

Dette tipset kan virke noe naivt og innlysende, men det er absolutt ikke alle som tenker over det. Eksemplet nedenfor er også noe simpelt, men du kan tenke deg et mer komplekst tilfelle.

Når du sitter og prøver å endre stil og må legge til important på alt, er det ikke et godt tegn. Derfor har jeg kun et budskap med denne posten, spesifiser hva du virkelig vil endre.

Eksempel

Jeg har linker jeg vil endre utseende på. Bakgrunnen vil jeg ha signalrød og en fet ramme som er 3 piksler bred og en enkel stripe på bunnen, og den skal være blå. De enseste linkene jeg skal bruke er i navigasjonen min, så derfor tenker jeg ikke lengre og generaliserer instillingene mine til at alle linker inneholder den stilen. Og jeg setter følgende:

  1. a {
  2.    border-bottom: 3px solid blue;
  3.    background-color: red;
  4.    color: black;
  5. }
  6. a:hover {
  7.    border-color: black;
  8. }

Her får jeg endret stilen min på den divisjonen jeg vil ha. For jeg har ingen andre divisjoner, og tenker ikke fremover til eventuell utvikling og viderebygging av systemet/siden min.

Nå tenker jeg at jeg vil ha en gjestebok på siden min. Og den har sitt helt egne stilsett. Så jeg slenger inn stilsettet med @import eller ved hjelp av link-tagen under header. Gjesteboken, jeg inkluderer med phps include(), har mange linker til hjemmesider, eposter, linker som brukerne poster etc. Nå vil alle linkene der bli lik navigasjonslinkene dine, for du ikke har spesifisert at det er navigasjonen din som skal se så stygg ut med rød bakgrunn og heftige rammer. Så derfor må du overskrive verdiene med å sette !important. Og vil du ha linkene til default verdi må du bruke inherit som verdi på background-color og border. Der er det problemene virkelig begynner. IE 6 og under støtter ikke disse verdiene, så hva skal du gjøre?

Nå er det riktignok ikke noe vanskelig å gå tilbake til ditt originale stilsett og spesifisere, men har du et mye heftigere og omfattende stilsett kan det bety mye ekstraarbeid. Særlig om det ikke er ditt stilsett du har med å gjøre.

Løsning

Løsningen har du kanskje skjønt til nå, budskapet også. Du må spesifisere hva du virkelig vil skal se hvordan ut. Velg nærmeste parent så det ikke blir tag-ene som får instillingene. Da sliter du om du vil ha defaulte verdier.

Mitt beskjedne budskap her på starten av påska.

Legg igjen respons

Fyll ut alle felt markert med *

Brukerinformasjon
  1. Kan bruke følgende html: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> og [html] [css], [mysql] og [php] Hold posten ren og fin!

    Siter valgt tekst

E-post-varsel uten å skrive kommentar.

Info om posten

Innlegget ble postet 04.04.07 17:49 og ligger under kategorien CSS / (X)HTML. Du kan abonnere på kommentarene ved å bruke RSS 2.0 feed. Du kan legge til kommenter, eller trackback fra din blogg/side.

Resurser

Arkiver

Metainfo


Siste Flickr-bilder

  • Commentsystem (20070308)
  • Ukraina Aksjonen 2006 (20070306)
  • Mikael Brevik blogg (20070306)
  • Mikael Brevik (20070306)
  • Brukerdefinert side - AVIS2 (20070306)
  • Brevik Webutvikling (20070306)
  • skyscraper
  • visittkort