CSS Overzichtelijk houden

[Verwijderd]

Wanneer ik aan een groot project bezig ben voor mijn werkgever, komt het regelmatig voor dat ik websites heb met 6 stylesheets, sommigen daarvan tellen bijna 2000 regels. Hierbij is het vaak zo dat mijn stylesheets rommelig worden. IK heb bij voorbeeld alle <p>'s in de <div id="content"> een bepaalde achtergrond gegeven. Wil ik dan een div met een class een andere achtergrondkleur geven, moet ik de #content ervoor zetten in mijn CSS. Dit is een vrij simpel en plat voorbeeld, maar het lukt me bijna nooit om bij een nogal uitgebreid HTML de CSS ook schoon te houden.

Wat zijn jullie ervaringen hiermee? Hoe houden jullie bij grote projecten alles overzichtelijk? Kiezen jullie ervoor om veel elementen classes te geven, of selecteren jullie liever aan de hand van de omliggende elementen (divs?)

[killercow]

Tjah, altijd moeilijk, maar het grootste gedeelte kun je afvangen door vorodat je begint je content semantisch in te delen,

links, buttons, groepen etc allemaal een zelfde logiche class geven, (t liefst gewoon via de tag ipv via een class)

Daarna de verschillende site containers (menu, header, footer, content) een ID geven.

Waar je ook op moet letten bij grote gecompliceerde css is:
http://developer.mozilla....le_system_breaks_up_rules

Daarnaast denk ik dat je met 6 stylesheets misschien eens naar je ontwerp moet kijken, if het echt nuttig om zo veel verschillende stylen te gebruiken op een pagina? het lijkt mij in ieder geval erg storend.

[Verwijderd]

Tuurlijk deel ik mijn content semantisch in - eerst het interactieve ontwerp voordat we het in DynamicWeb(CMS) zetten. Deel van de stylesheets worden door DynamicWeb zelf geplaatst, dan hebben we onze reset.css, screen.css, forms.css, ie.css - daarnaast gebruiken we nog verschillende kleurenthema's bij verschillende onderdelen.

De link die je stuurde is wel vrij nuttig, maar vind het lastig om de juiste combinatie tussen classes in de HTML en selecteren op basis van ID's en tags te vinden. Daarnaast kom ik welleens dit probleem tegen:

#content p {
background: red;
}

overschrijft

.class {
background: black;
}

Ik kan moeilijk alle p's een class meegeven, maar

#content .class {
background: black;
}

Vind ik toch ook een minder mooie oplossing, omdat het je CSS ingewikkelder, langer en minder inzichtelijk maakt. Hoe doen jullie dit?

[Zoefff]

Wat je vooral moet doen is van te voren eerst goed nadenken hoe je alles gaat aanpakken. Hoe wordt een gemiddelde pagina opgebouwd, welke delen zitten er in, zorg dat die een duidelijke benaming krijgen, maak goed gebruikt van id's en classes, etcetera. Gebruik vooral niet te veel classes! Vaak is een element dmv de beschikbare CSS selectors al te targetten

Splits -zoals je zelf al zegt- je CSS op in meerdere bestanden, dus inderdaad een framework.css (voor de CSS die op vrijwel elke pagina gebruikt wordt), forms.css (vanzelfsprekend), actions.css (bijvoorbeeld voor veschillende acties), iefix.css, enzovoort.

Ik vind het zelf juist wel prettig om regels te 'prefixen' met hun ID. Het maakt je CSS misschien wat groter, maar je ziet wel in 1 oogopslag op welk deel van je website de regels betrekking hebben. Bijkomend voordeel is dat je browser sneller parsed naarmate de CSS specifieker is (maar dat is een micro-optimalisatie ). Wat ik wel altijd doe is het element voor een ID of class zetten, mits dit natuurlijk altijd hetzelfde element is.

Bijvoorbeeld:

Cascading Stylesheet:

div#content {
  border: 1px dotted red;
}

div#content p {
  background: yellow;
}

div#content p.waa {
  background: green;
}

Je zal je bij deze werkwijze alleen even moeten afvragen welke elementen je site-wide hetzelfde uiterlijk wilt geven, ongeacht de 'container' waar ze in zitten. Bijvoorbeeld de headings h1 t/m h6.