Slik skal du ikke skrive et stilsett

Det er flere elementer du bør styre unna når du skriver et stilsett – vi gir deg tipsene.

Det er en haug med ressurser, tips og triks på internett som forteller deg hvilke standarder og praksiser du bør følge, hva som er den optimale måten å designe et nettsted på.

Web-standarder er en nødvendighet, og det å kunne skrive en ryddig kode, og ha en smart måte å komponere optimal CSS på er meget viktig. Det handler om å ta vare på det mest grunnleggende, samtidig som du må være tålmodig mens du koder, og hold deg unna grumsete kode og work-arounds.

Vi tar en titt på de værste elementene du bør holde deg unna når du skriver et stilsett.

Les også: En innføring i CSS

Slutt med ‘!important’

Endelsen !important var opprinnelig ment som en måte for brukerene å overstyre forfatterens stilark. Brukeren kunne definere deres egne stilark og deres verdier ville overstyre forfatterens verdier ved å legge til !important, for eksempel p { color: #ff0000 !important; }

Desverre har bruken av endelsen spredt seg massivt i feil retning, og mange webutviklere bruker dette i sine egne stilark. Du kan enkelt unngå bruken av !important ved å være påpasselig når du skriver koden, og hvilke velgere/selectors du bruker.

Unngå ’@import’

Bruken av @import kan være hendig når du arbeider med et prosjekt hvor du har mange CSS-filer anhengig av ulike moduler. Selv om dette er svært nyttig under organiseringen av modulære CSS-filer, er det også mange ulemper knyttet til den.

Importering av stilark kan øke lastetiden på nettstedet betraktelig og det finnes forskjellige tilfeller hvor bruken av @import gir uønskede resultater.

Det er i hovedsak to måter å inkludere et stilsett på, enten ved bruk av LINK eller Import.

<link rel='stylesheet' href='a.css'>
<style>@import url('a.css');</style>

Du kan benytte @import alene, men unngå å bruke det sammen med LINK. Dette vil gi økte nedlastingstider for ditt nettsted. Anbefalt er å kun benytte LINK. Les mer om hvorfor du ikke bør bruke @import på Steven Souders nettsted, som har gjort omfattende undersøkelser på effektiviteten av de to funksjonene.

Unngå IE ‘expressions’

Siden støtten for CSS i eldre utgaver av Internet Explorer har mildt sagt vært sviktende, har smarte utviklere startet å bruke CSS expressions for å veie opp for CSS-funksjonalitet de skriver. Men, det er få som har tenkt over hvordan dette påvirker ytelsen på nettstedet.

CSS expressions er basert på JavaScript, og gjennom CSS-implementering i Internet Explorer åpner dette for muligheten til å skrive scripts gjennom CSS-koden.

Først og fremst, virker det som om utviklere glemmer det faktum at bruk av expressions krever av JavaScript er aktivert i nettleseren for at det skal fungere. Og siden du heller ikke vil at designet skal være avhengig av JavaScript – må du sørge for en plan B for at designet skal fungere uten JavaScript.

Grunnen til at CSS-expressions er meget ressurskrevende, er at resultatverdien til en expression ikke bare blir kalkulert én gang, men konstant mens du bruker nettstedet. Mye bruk av expressions på et nettsted vil generere så mange HTTP-request at det til slutt kan kvele hele nettstedet for brukeren. Bruk heller ordentlig JavaScript i en ekstern fil dersom du må lage work-arounds. Les her om CSS-expressions her.

Sider:

Kommentarer