Guide: Forbedre ditt stilskjema

[Stian Jacobsen]

Her er en liten guide om hvordan du kan forbedre ditt stilskjema.

 

1. Rammeverk

Med @import kan du på en enkel måte inkludere flere stilskjemaer, noe som kan være kjekt dersom du

ønsker å separere oppsettet ditt

Eksempel:

@import url(css/reset.css);
@import url(css/globale.css);
@import url(css/layout.css);
@import url(css/tabeller.css);

Dette eksemplet henter inn alle de forskjellige stilskjemaene som danner ditt rammeverk. Dette kan lagres i en

separat css-fil, f.eks load.css

 

2. Skriv en ren og pen kode

For å lettere kan gå tilbake å endre ditt stilskjema, er det viktig at du skriver en ren og pen kode.

Det er ingen internasjonale standarder på hvordan dette skal gjøres, men her er et lite eksempel

div#id_felt
{
margin: 1em 0 0 2em;
border: 1px solid #333;
color: #000;
background-color: #fff;
}
 div#id_felt .klassenavn
 {
  font-size: 14px;
 }
div#id_felt, .klassenavn p,h1,h2
{
	margin: 0;
	padding: 0;
	color: navy;
}

/* Kommentar felt her..
- - - - - - - - - - - - - - - - - - - - - */

form label 
{
display: block;
width: 100px;
float: left;
}

 

3. Kutt ned på koden

CSS er genial på den måten at du kan kutte ned en del kode, her er noen eksempler

div.klassenavn
{
margin: 1px 2px 0 3px;
color: #333; // Dette er den samme som 333333
}
div#nummer1, div#nummer2, div#nummer3, div.annen
{
color: navy;
}

Endret 15. oktober 2007 av MrNeeon

[Haraldson]

div#id_felt .klassenavn p,h1,h2

Der har du blingsa.

 

Videre syns jeg det er litt komisk hver gang jeg ser CSS skrevet som det var funksjoner i PHP eller JS. Jeg kommer ikke på en eneste grunn som skulle tilsi at { skal få sin egen linje, man ser hvor blokka starter og slutter uten, og sparer en linje. Vel og merke hvis man har innrykk på egenskapene og tilhørende verdier.

 

En linje her og der gjør mye i et langt og stort stilsett.

 

 

Sånn ellers er det vel ikke mye nytt her, tror det skal litt til i form av arbeid fra din side før noe sånt blir sticky eller f.eks. nevnes før HTMLDog i en FAQ her for eksempel.

[Lokaltog]

Anbefaling: Last ned TopStyle. Der har du endeløse muligheter for rask og effektiv CSS-redigering og -organisering. For store siter med mange CSS-filer og mange requests vil jeg IKKE anbefale å bruke @import, da dette medfører mange ekstra requests pr. sidevisning. Jeg har ca. 10 stilark på Russ.no, men alle kombineres til én fil med en ingenious PHP-basert cachingløsning.

 

Hint/veldig kjapp pseudokode:

files = array(file, file, file)
foreach(files as file){ css .= file_get_contents(file) }

if(GET[refresh] == 1) {
cached_raw = css
cached_gzip = gzip_compress(css)

/* legge data i variablene ovenfor i memcached eller filbasert caching */
}

if(browser_supports_gzip()) { /* sjekke om brukeren trenger en ny versjon av cachet gzip-kodet CSS med If-Modified-Since og kjøre ut riktige headere og innhold */ }
else { /* samme prosedyre som ovenfor, bare med ren CSS */ }

Endret 15. oktober 2007 av Lokaltog

[Runar]

Takk for tipset, Lokalbuss. Dette skal prøves ut!

 

PS: Den gamle avataren din slår den nye langt ned i støvlene.

[Lokaltog]

Takk for tipset, Lokalbuss. Dette skal prøves ut!

 

PS: Den gamle avataren din slår den nye langt ned i støvlene.

OT: Hvilken gamle avatar? Den med klokka, eller "it's teh lokaltog"?

 

Skal se om jeg kan komme med en light-variant av cachingscriptet jeg bruker også.

[Steinmann]

Klokka, da så du proff ut. Nå ser du deg ut

 

Hadde vært kult med et skript som tok css mappen, og så gjorde resten fra det

 

Ikke at jeg bruker php anyways da..

[Lokaltog]

Um... wtf. Hvorfor kan man ikke linke til eksterne avatarer lenger? Ser bare en opplastingsboks og ingen mulighet til å linke til den fine, gamle avataren min:

 

[Runar]

Jeg likte "it's teh lokaltog" avataren. En av de bedre jeg har sett på forumet

 

Er det det samme å bruke @import som en ekstra ?

[Vindstille]

Er det det samme å bruke @import som en ekstra <link rel="stylesheet">?

I praksis ingen annen forskjell enn at @import ikke er støttet av eldre nettlesere som NN4.

 

Men jeg bruker link-elementet til å gi adressen til forskjellige stilsett (f.eks. alternative stilsett, og for printere, tv-er, mobile enheter osv.). Og så bruker jeg @import til å importere stilsett som er fordelt over flere filer, hvis det er en stor fordel at de er fordelt over flere filer.

 

EDIT: Sakkars trådstarter. Her prøver han å hjelpe folk. Og alt han blir møtt av er kritikk. Synes det er bra noen lager en tråd om dette. Mange som glemmer de to siste tingene. (Spesielt det nederste).

Endret 16. oktober 2007 av JonT

[Lokaltog]

EDIT: Sakkars trådstarter. Her prøver han å hjelpe folk. Og alt han blir møtt av er kritikk. Synes det er bra noen lager en tråd om dette. Mange som glemmer de to siste tingene. (Spesielt det nederste).

Det er jo ikke vondt ment.

 

Men siden vi likevel har en diskusjon rundt det, så synes jeg det er helt akseptabelt å komme med andre løsninger og idéer rundt problemstillingen? Bra initiativ uansett, og mange kan lære noe av tråden.

[Steinmann]

Testet topstyle:

- Den slenger på en slutt-tag når jeg åpner en

- Den lukker ikke tag når jeg skriver </

 

+ Digg på css

 

Er sikkert mulig å endre på dette da.

 

 

Er på utkikk etter en editor jeg kan bruke til html, css, og kanskje litt python snart..

[Vindstille]

Er på utkikk etter en editor jeg kan bruke til html, css, og kanskje litt python snart..

InType, TextMate, Notepad++

[Steinmann]

Er på utkikk etter en editor jeg kan bruke til html, css, og kanskje litt python snart..

InType, TextMate, Notepad++

InType hadde jo enda mindre funksjonalitet, TextMate er for mac, Notepad++ hadde heller ikke lukking av tags, noe jeg har blitt avhengig av..

[Haraldson]

Er det noe jeg virkelig hater, er det autolukking av tags. Hadde vært ok om jeg skrev HTML lineært, og alltid huska på alt jeg skulle ha med osv.

[Steinmann]

Snakker ikke om autolukking, det er hat. Men at den lukker seg når man skriver </, det er jo digg

[Kim T]

dreamweaver sin editor har autolukking av tags. Er veldig fornøyd med den jeg.

[Haraldson]

Er ganske tungt med DW bare for å kode / programmere, har bare behov for sikkert maksimalt 5% av DWs funksjonalitet.

[Steinmann]

Så hva bruker du Oh'store ?

[Kim T]

Er ganske tungt med DW bare for å kode / programmere, har bare behov for sikkert maksimalt 5% av DWs funksjonalitet.

 

Er enig med deg her. Når jeg snakket om autolukking så snakker jeg om at den fullfører tag'en automatisk ved å skrive </.

Finner Steinmann et "lettere" program så er jeg interessert i å vite hvilket.