Hur strukturerar man CSS-filerna bäst?

När man jobbar med större sajter blir det ofta väldigt mycket css-kod. Och när man sen ska in och grotta i dem igen och ändra något eller lägga till, så blir det ofta inte så enkelt som man trodde.

T.ex. ett dilemma som jag inte riktigt hittat en universal-lösning på är om man ska ange en textfärg endast en gång men då ha en massa selectors för den färgen eller om man ska dela in css:en lite mer efter olika delar på sajten och ange färgen flera gånger. Det första är ju att föredra om man endast kommer vilja ändra färgen, men om man ska ändra något på sajten så kan det bli ganska omständigt.

Jag har flera gånger önskat att man skulle kunnat använda variabler för typsnitt, färger, värden etc i css, som man kan definiera högst upp i filen och sen hänvisa till. Då kan man skriva CSS:en indelat efter de olika delarna på sajten, men också på ett enkelt sätt ändra en färg och typsnitt supersnabbt.

Hur gör ni? Kom gärna med bra tips på hur man håller CSS:filerna strukturerade.

Ja det där är saker som jag också har funderat på.

Det är dock enkelt och bra att dela upp det på flera filer, man kan ha en för typografin, en för formulär, en för navigation osv. Sedan så använder man @import url("style.css") i en css fil för att inkludera style.css t.ex.

Jag brukar samla ihop saker som styr liknade saker under en kort förklaring. Så här kan det se ut.

/*menyer*/
#meny1{ osv
#meny2{ osv

/*texter*/
.text{
.copyrighttext{

Du kan använda variabler i stilmallar om du producerar stilmallen med nåt skriptspråk. Jag brukar inte göra det men det kanske hade varit effektivare när det är mycket som upprepas.

Annars brukar sök/ersätt fungera bra för mig om jag vill ändra en färg.

När det kommer till hur CSSen struktureras brukar jag ha ungefär samma struktur på CSSen som HTML-koden. Det gör att man kan få en uppfattning av hur HTML-koden ser ut utan att ens ha sett den. Jag har också varje regelmängd på en rad (eller åtminstone blocket, om jag har flera långa selektorer för en regelmängd kan jag radbryta mellan selektorerna), och indenterar regelmängderna efter strukturen i HTML-koden. Tex:

html { }
 body { }
  .header { }
   .header h1 { }
    .header img { }

  .nav { }
   .nav li { }
    .nav :link, .nav :visited { }

  .article { }
   .article h2 { }

  .footer { }

  :link { }
  :visited { }

Jag grupperar stilregler om tanken är att de ska vara exakt samma, men inte annars.