1

Onderwerp: Ordenen van je CSS

Hoi,

Naar aanleiding van het artikel How to order CSS selectors van Jens Meiert ben ik benieuwd wat jullie systeem is om je css stylesheet helder en overzichtelijk te houden.

Ik rangschik de css selectors meestal analoog aan de volgoorde die ik in het html-document heb gebruikt. Dus eerst alle header-elementen, daarna alle article-elementen, etc. ten slotte de footer-elementen. De declarations binnen de selectors rangschik ik soms alfabetisch, soms "van groot naar klein" (dus eerst layout, dan styling).

Ik ben niet echt tevreden over mijn manier van ordenen, omdat ik toch vaak moet zoeken waar ik iets neer heb gezet, of declarations over 't hoofd zie. Zeker kun je altijd search gebruiken, maar handig vind ik het niet. Daarom ben ik heel benieuwd naar jullie werkwijze. Welk systeem gebruik je zelf? Wat vind je makkelijk om mee te werken als je de code van iemand anders moet bewerken?

Groet,
Verena

2 Laatst bewerkt door Sander van Lambalgen (16-09-2013 19:39:46)

Re: Ordenen van je CSS

Binnen selectoren doe ik heel strict van meest-layout-beinvloedend naar minst-layout-beinvloedend (dus position, display, (min-/max-)width/height, margin, border, padding, font-*/text-*, outline, box-shadow, cursor, background-/color).

Volgorde van selectoren verschilt van project tot project, afhankelijk van de grootte en complexiteit ((hoe) splits ik de CSS op in meerdere files? Simpel (1 generiek voor de hele site, 1 per template), tot hele geneste structuren die afhankelijk van sectie bij elkaar geminimized worden.) Maar 'meestal' begin ik met generieke (element) styles die overal in een site terugkomen (inclusief zeer beperkte reset), dan "layout" (kolom / grid definities), dan algemene typography, dan de bij elkaar horende regels voor vaak terugkomende componenten ("boxes" met randjes en type headers, avatar-blokjes, review-sterretjes, etc, en tenslotte (eigenlijk altijd in eigen files) template-specifieke regels.

Overschrijvingen van eerdere regels (qua hogere specificity) probeer ik binnen dat stramien zoveel mogelijk te groeperen, zodat ik, als ik op zoek ben naar de ene, ook gelijk alle andere modifiers zie, en daarmee help te vermijden dat ik mezelf in de weg ga zitten.

Aan de hand van zo'n volgorde heb ik altijd een redelijk goede mental map van waar ik bepaalde CSS regels kan vinden (en nieuwe ga toevoegen), en als ik er overheen scannend niet gelijk zie waar ik moet zijn, dan helpen logisch gekozen classnames me dan om snel te ctrl-F-en naar precies de juiste regel. Mocht je daarna toch nog de weg kwijt raken, dan kan ik aanraden om elke sectie binnen je CSS files d.m.v. een comment block er uit te laten springen (en ook daar kan je natuurlijk naar zoeken binnen het bestand).

3

Re: Ordenen van je CSS

Wat betreft volgorde binnen een CSS-declaratie doe ik het precies zoals Sander, dus eerst position, display en float en daarna steeds minder significant.

Hoe je je CSS opdeelt hangt af van het project. Als het heel widget-georiënteerd is, dan kan je een CSS-bestand per widget maken. Soms maak ik één groot CSS-bestand, waarbij de onderdelen met commentaar zijn gescheiden. Het voordeel van één bestand is dat je geen twintig tabjes in je editor open hebt ;-)

Wat betreft zoeken: ik zie dat niet als een probleem. In Firebug kies ik het element en dan zie ik rechts de CSS-regels met bestandsnaam en regelnummer. Ik kan dus heel snel naar de juiste CSS-regel springen. Met de juiste plugin werkt dat ook als je SASS gebruikt.

Bij code van andere loop ik wel een tegen hele lange en specifieke selectors aan die ik dan moet overriden. Als de bestaande code id's in de selector heeft en ik wil zelf geen id's gebruiken, dan moet ik of óók id's gebruiken of het paardenmiddel !important gebruiken. De CSS herschrijven is bij grote sites meestal geen optie omdat je vaak niet weet waar welke CSS-regels worden gebruikt en dat uitzoeken zou erg veel tijd kosten. Je kunt natuurlijk vragen of je de CSS opnieuw mag schrijven, met slechte CSS moet dat uiteindelijk toch een keer gebeuren.  neutral

Dit probleem is voor een groot gedeelte te voorkomen door je CSS als volgt op te zetten:

Stel je hebt een carrousel die je een stijl wilt geven.

Je noemt je bestand carrousel.css

De inhoud wordt dan bijvoorbeeld:

.carrousel .header {
...
}
.carrousel .go-left {
...
}
.carrousel .go-right {
...
} 

Enzovoorts. Carrousel kan je hier natuurlijk ook door header, article enzovoorts vervangen.

Voordelen:
Er is een sterke relatie tussen de CSS en de bestandsnaam, de selectors zijn kort en bevatten geen id's, zodat overriden zelden een probleem oplevert en door elke selector met een vaste class te beginnen kunnen er geen conflicten ontstaan tussen verschillende onderdelen die toevallig dezelfde class gebruiken maar een andere stijl toepassen.

4

Re: Ordenen van je CSS

Ik heb meestal 1 style.scss waar zoiets als dit in staat

// --------------------------------------------------
//  Sass extensions
// --------------------------------------------------
@import "compass";
@import "breakpoint";


// --------------------------------------------------
//  Embedded files
// --------------------------------------------------
@import "generic/settings";
@import "generic/mixins";
@import "generic/reset";
@import "base/fonts";
@import "base/global";
@import "base/grid";
@import "base/icons";


// --------------------------------------------------
//  Components
// --------------------------------------------------
@import "components/modules";


// --------------------------------------------------
//  Print
//  Has to be last to override when necessary
// --------------------------------------------------
@import "base/print";

In de scss bestanden zelf orden ik het op alfabet. Is soms niet het mooiste omdat width & height bijvoorbeeld niet bij elkaar staan maar wel iets wat iedereen begrijpt en makkelijk toe te passen is. Zeker handig als je in een team werkt.
In SublimeText heb je tevens de shortcut F5 die je geselecteerde regels gelijk op alfabetische volgorde zet.

5

Re: Ordenen van je CSS

Hallo,

Bedankt voor jullie reacties! Ik ben nu met jullie voorstellen aan de slag gegaan en heb toch nog een vraag. Als je binnen een selector van meest layout-bepalend naar minst layout-bepalend rangschikt, waar zouden jullie dan zoiets als z-index, transform en transition stoppen? Ik heb z-index en transform voor nu in de buurt van width en height geplaatst, omdat deze declaraties de vorm en zichtbaarheid van een element bepalen. Maar hoe zit het met transition? Zou je ook willen uitleggen, waarom je deze declaraties ergens plaatst?

6 Laatst bewerkt door Sander van Lambalgen (16-09-2013 20:10:03)

Re: Ordenen van je CSS

z-index stop ik meestal direct na position, omdat ik het alleen gebruik als ik iets position (ook al heeft het ook effect bij bijvoorbeeld getransformde elementen). transition en transform heb ik nog niet vaak genoeg gebruikt om een routine te hebben met waar ik ze neerzet, maar in eerste instantie zou ik transform redelijk onderaan (naast outline en box-shadow) neerzetten, omdat het niet de layout van andere elementen beïnvloedt. Transition is een moeilijkere; het hangt af van _wat_ er aan het transitionen is of het layout beïnvloedt. Als er slechts één property in de transition staat zou ik het daar direct na zetten; anders waarschijnlijk onderaan.

7 Laatst bewerkt door Mallory van Achterberg (22-09-2013 22:33:08)

Re: Ordenen van je CSS

Ik heb mijn eigen order, een beetje zoals Sander maar niet helemaal. Dus ik denk wat belangrijk is, is een order voor jezelf te vinden die jij denkt dat jij kan altijd blijven gebruiken zonder te veel nadenken. Dan schrijf je lekker snel en maak je niet de fout dat je hetzelfde declaration maken meerdere keren.

Toen de nieuwer CSS declaraties kwam, had ik al een order die ik gebruikt waarin ik nieuwe plekken kon vinden die klopt met mijn huidige systeem. voor een tijdje had ik alles met vendor prefixes aan het eind, maar nu hebben ze zn eigen plek ook.

Voor grote gedeelten van het pagina, waar je geen order kan vinden in de HTML omdat het naar verschillende pagina's gaat, doe ik text erboven die ik kan gebruiken voor zoeken, en soms (zoals met mijn huidige werk waar ik moet override css schrijven per child-site) maak ik mijn eigen piraat-achtig treasure map (een lijst met de volgorde van mijn onderwerpen/gebieden). Dus zoiets:
(na header, nav, zoekbalk, sidebars enz)

-Homepage dingen
-promo's
-homepage sidebars


-product lists
-dingen binnen product list

-Main product details pagina
-dingen op product_details pagina

-Forms
-general inputs
#blahblah-form special input enz

-Winkelwagen
-order_placement_list
-general tables

-checkout pagina's
-bijzonders met checkout

-payment

(dus ook een beetje de order van de gebruiker als dat bij hoort)

aan het eind, footer enz

ischa schreef:

maar wel iets wat iedereen begrijpt en makkelijk toe te passen is

voor mij niet. Ik ben dom. Ik moet de alfabet liedje in mijn hoofd zijngen voor vele letters ergens in het midden. ik weet niet of ik de enige in de hele wereld met zo'n probleem loopt, maar alfabetische is net zo langzaam voor mij als geen order (behalve a,b,c en x,y,z).