Vadå tabba CSS?

Tråden skapades och har fått 15 svar. Det senaste inlägget skrevs .
1

Jag undrar en sak. Vi har nu en kurs i html o css och läraren menar att man ska tabba sin css, alltså som om det vore html.

De saker som ligger i headern ska ligga under headern och ha två indrag, vilket gör att css'en blir i mina ögon väldigt rörig och jag har aldrig sett något liknande.

Visar det sig att det är så "man ska göra" så ger jag mig o allt, men jag vill inte ägna tid åt att skaffa en annan vana och sen behöva lära om igen sen..

*förvirrad*

Jag undrar om han/hon refererar till "coding conventions", dvs. vad som är brukligt/vanligt/vedertaget.

Vitsen med det är att koden blir mer lättläst, kanske framför allt för andra, vilket inte saknar betydelse. Överhuvudtaget är det nyttigt att vänja sig vid tanken på att det finns mer eller mindre vedertagna konventioner, eftersom det gör det lättare ju fler språk man börjar jobba med.

Läs lite på de länkar som denna sökning ger:

css conventions - Sök på Google

  • Medlem
  • Malmö
  • 2011-12-06 12:43

"tabba sin css", menar du identering?

Jag menar indentera. Vilket jag självklart tycker man ska göra, jag bara undrar om jag får lära mig rätt på det här viset.. Har aldrig sett något liknande i CSS?

Såhär...

eller såhär?

Har aldrig sett något som ser ut som bild 2.

Det finns säkert olika praxis, men jag kan nog tycka att det finns en poäng med den stilen. Det enklast är väl att du helt enkelt frågar din lärare

  • Medlem
  • Malmö
  • 2011-12-06 13:30

Jag tycker också det ser märkligt ut, för visst är "content" och "wrap" helt fristående från "body"?

Oavsett vad det för divar, brukar man indentera på det viset i css? Jag vill ju ändå lägga mig till med rätt vanor direkt..

  • Medlem
  • Harestad
  • 2011-12-06 14:09

Man behöver ju inte överdriva med layouten på CSS-koden. Men det gör heller inget att vara extra tydlig. Speciellt inte när man är flera som jobbar med samma projekt.

Här är rätt bra tips tycker jag:
10 Best CSS Practices to Improve Your Code | Webdesigner Depot

Det är viktigare med kommenteringen än tabbningen. Även om det är fint om koden är strukturerad. Koden till Wordpress standardtema tycker jag är överskådlig och bra:
http://wp-themes.com/wp-content/themes/twentyten/style.css

Om du kodar SASS eller SCSS så förstår jag varför man ska tabba vissa delar, men i vanlig CSS ser jag ingen mening med det.

  • Medlem
  • Göteborg
  • 2011-12-06 19:07

Det är inte alls självklart att css-en har samma hierarkiska struktur på samma sätt som html.
Jag brukar inleda med grunläggande stilar för alla html-taggar (lämpligt att göra om man har haft en css-reset som gör att all text ser likadan ut, oberoende av tag).
Om visa avsnitt (header, footer,...) skall ha sina lokala stilregler är det lämpligt att hålla dem ihop. Det gör man helt naturligt och fördelaktigt enkelt och rationellt om använder tex LESS.

header{
	h1{
		...
	}
	p{
		...
	}
	ul{
		li{
			...
		}
	}
	nav{
		...
	}
}

Men css har en viss tendens att bli ganska långa filer. Håller man på och indenterar hierarkisk efter html-strukturen, blir det nog ganska lätt att man tappar kontakten med hierarkisk överliggande taggar och har en massa inledande taggar framför reglerna utan att riktigt se varför. Bara för att man har definierat några regler på body-taggen så har man fått en extra tabb framför hela återstoden av filen. Verkar inte vettigt.

Det här med LESS, SASS o något mer, det är något helt nytt för mig. OM det är det han försöker lära ut så kan det vara bra att berätta det, berätta skillnaden osv. Något människan inte gör.

Så. För att vrida lite på min världsbild, är det bara med special-varianterna av CSS som man gör så?

  • Medlem
  • Göteborg
  • 2011-12-07 22:39
Ursprungligen av klarabara:

Det här med LESS, SASS o något mer, det är något helt nytt för mig. OM det är det han försöker lära ut så kan det vara bra att berätta det, berätta skillnaden osv. Något människan inte gör.

Så. För att vrida lite på min världsbild, är det bara med special-varianterna av CSS som man gör så?

LESS och SASS är CSS på steroider. (om den liknelsen gör saken attraktiv eller inte är en annan diskussion).
Man kan använda variabler, köra matte på färger, återanvända klasser, och mycket mer.
LESS är i grunden javascript-baserat och kräver att webbläsaren tolkar less-filen så att den blir begriplig css. Men sen finns det smått fantastiska less.app som kör lokalt när man utvecklar och sparar om ens less-filer till css-filer. man kan således skriva sin css i less-form men ändå länka till vanliga css-filer på sina sidor. Känslan är nästan som att äta kakan och ändå ha den kvar. Rekommenderas varmt.

Läs här, så fattar du nog bättre:
LESS.app For Mac OS X

WTF? Jag kommer inte kunna sova inatt!

Inte nog med att deras 2min-tutorial var magisk hela grejen är magisk.

Will I? Yes, I will.

*skuttar i säng*

  • Medlem
  • Stockholm
  • 2012-01-17 12:32

Jag kör alltid som i första exemplet, och det känns som att det är någon sorts vedertagen standard när man utbyter css-filer med andra utvecklare eller redigerar befintlig css från olika applikationer.

Däremot är det ju en god idé att dela upp css:en i olika block, Men där tycker jag några nya rader och en blaffig kommentar gör jobbet bättre än att börja försöka sig på en hierarki med indentering. Det behöver ju inte alltid vara samma logik i hierarkin i html & css...

  • Medlem
  • Arvika
  • 2012-01-17 13:18

Jag brukar alltid köra som bild 2, jag tycker det blir mer lättläst och "organiserat".
Typ:

header {
    ...
}
     header nav {
        ...
     }
aside {
   ....
}
     aside nav {
          ...
     }

Jag vet att det inte är så jättevanligt att göra på det viset, men jag gillar det

1
Bevaka tråden