[CSS] Je stylesheet overzichtelijk houden

[Verwijderd]

Iedere keer weer als ik een site moet opzetten wordt mijn CSS file een rotzooi. Ik heb van alles geprobeerd, posities in een bestand, styles in de andere, dingetjes onderverdelen aan de hand van het onderdeel van de site, onderverdeling maken in type style (text, plaatje, positionering, etc.) maar tot nu toe is het resultaat eigenlijk altijd erg slecht.

Zijn er methoden, technieken, ideeën, richtlijnen, wat dan ook, om een stylesheet goed overzichtelijk te houden? Hiermee bedoel ik eigenlijk de indeling van zo'n CSS file.

Het kost gewoon zo veel tijd iedere keer weer

[Dr_Frickin_Evil]

Ik gebruik topstyle, en met dat programmaatje blijft het best netjes vind ik. Ik moet wel nog eens een goeie reference guide over css gaan bekijken, want volgens mij maak ik een hoop onnodige classes aan.

Hier staat een voorbeeld van mij:
http://131.155.240.208/berson/berson.css

[André]

De indeling kun je sorteren op elementen, classes, id's:

Cascading Stylesheet:

BODY {
  background-color: #FFFF00;
}

.Rood {
  font-color: #FF0000;
}

#Logo {
  display: none;
}

[dominic]

Ik probeer stijlen altijd zoveel mogelijk te specificeren, zodat je het later naar hierarchie kan indelen:

code:

table.maintable 
{
   width:500px;
}

table.maintable tr.header td
{
  font-weight:bold;
}

table.maintable tr.data td
{
  border-bottom: 1px solid black;
}

table.maintable tr.data td.spec
{
  font-weight:bold;
}

[Verwijderd]

Jup zo had ik het ook al gedaan Alleen het probleem waar ik dan tegenaanloop zijn de uitzonderingen, je hebt bijvoorbeeld een kopje in Verdana, rood, 1.4 em en underlined (noem maar wat) - alleen in een "archief" pagina moet dit kopje 1.1 em groot worden. Het makkelijkst (en meest luie) is dan om in mijn XSL gewoon hardcoded:

code:

font-size: 1.1em;

te zetten

Als ik dat namelijk niet doe heb ik al gauw weer een CSS met onder het onderdeel "classes" zo'n 300 classes waarvan zelfs ik niet meer weet wat-wat is

Dr_Frickin_Evil, mocht je ooit een echt goede tutorial vinden, zou je die dan hier willen posten? Ik heb al wel een paar dingetjes via Google gevonden, maar niet echt iets wat ik niet al wist/deed.

[ Voor 4% gewijzigd door Verwijderd op 12-02-2004 11:58 . Reden: CSS tags bestaan niet ]

[Justice]

Ik zet altijd de DIV's bij elkaar, en aangezien die meestal een ID hebben zet ik alles wat op elementen in de div slaat bij de id:

Cascading Stylesheet:

div#content {
    ....
}

div#subnav {
     .....
}

#content h1 {
    font-size:1.2em
}

#subnav ul li {
    border:1px solid #f00;
}

Hierdoor heb je alle hoofdsecties bij elkaar wanneer je iets aan de pagina layout moet doen, maar kan je ook specifiek dingen aapakken.

[André]

Uitzonderingen kunnen toch best hard-coded, als je kijkt naar de site van mijn volleybalvereniging staan er op de homepage 2 boxjes die nergens anders gebruikt worden. Daarom heb ik die gestyled met een inline stylesheet.

[Verwijderd]

André schreef op 12 februari 2004 @ 12:00:
Uitzonderingen kunnen toch best hard-coded, als je kijkt naar de site van mijn volleybalvereniging staan er op de homepage 2 boxjes die nergens anders gebruikt worden. Daarom heb ik die gestyled met een inline stylesheet.

Ja het kan inderdaad wel, maar wat nou als je met een template systeem werkt wat meerdere keren ingezet gaat worden, en juist dat ène lullige elementje dan niet goed werkt in een aangepaste stylesheet? Dan moet je alsnog in je XSL template gaan klooien, wat dus de onafhankelijkheid van zo'n template om zeep helpt.

[David]

Voor grote stylesheets gebruik ik vaak de volgende methode (gestript knipseltje):

code:

#navigation { background-color: #FFF; text-align: left; }
#navigation ul { margin: 0px 2px 2px 2px; padding-left: 3px;}
#navigation ul li { margin: 0px; display: inline; }
#navigation ul li a:link,
#navigation ul li a:visited { text-decoration: none; color: #000; }
#navigation ul li a:hover {text-decoration: underline; color: #000; }
#navigation ul li a:active { text-decoration: none; color: #000; }

#canvas { margin: 4px; position: relative; background-color: #FFF;  }
#canvas h1 { font-size: 18px; line-height: 20px; font-weight: normal; }
#canvas h2 { line-height: 14px; font-size: 10px; font-weight: bold;}
#canvas p { margin: 14px; }

Misschien per item niet zo overzichtelijk, maar het is vooral makkelijk snel items terug te vinden

[r0bert]

Ik weet niet meer bij wie ik het laatst had gezien, maar was bij iemand hier op het forum:

Cascading Stylesheet:

div#container
{
    width:             500px;
    height:             500px;

    border:             black 1px solid;
}

      div#navigatie
      {
          background-color:   red;
      }

            div#navigatie div.navitem
            {
                padding:            10px;
            }

div#footer
{
    height:             20px;

    font-size:          8pt;
}

HTML:

<div id="container">
   <div id="navigatie">
      <div class="navitem"></div>
      <div class="navitem"></div>
      <div class="navitem"></div>
   </div>
</div>
<div id="footer">
</div>

Oftewel, de structuur van geneste elementen ook meegeven door middel van inspringen

[ Voor 60% gewijzigd door r0bert op 12-02-2004 12:33 ]

[Rickets]

Dat is niet echt overzichtelijk. Zeker als je veel geneste elementen hebt, wordt het al snel een brede bedoening, waardoor de leesbaarheid verloren gaat.
Dan nog liever de manier van DiMension.

[Verwijderd]

werk zelf veel met comments, zodat de collega's het ook nog kunnen volgen

HTML:

/* navigatie */
ul {
   blaat blaat
}

/* einde navigatie */

[r0bert]

Rickets schreef op 12 februari 2004 @ 12:30:
Dat is niet echt overzichtelijk. Zeker als je veel geneste elementen hebt, wordt het al snel een brede bedoening, waardoor de leesbaarheid verloren gaat.
Dan nog liever de manier van DiMension.

Je kunt het inspringen verkleinen tot bijv 4 spaties en je hebt de horizontale scrollbar niet voor niets hoor, die is even makkelijk te gebruiken als de verticale

Verder kun je bij diepe nesting een verwijzing maken, bijvoorbeeld door comment, en voor dat gedeelte een apart deel van in je stylesheet gebruiken..

Maargoed, ieder zijn eigen voorkeur ..

edit:
Ja, comments zijn ook heel nuttig om te gebruiken natuurlijk

[ Voor 35% gewijzigd door r0bert op 12-02-2004 12:33 ]

[Blaise]

Ik gebruik ook DiMensions methode, en dan gesorteerd op element, class en id, en daarin meestal weer gesorteerd op volgorde in de html.

[coubertin119]

Ik werk volgens de manier die r0bert toont, en het werkt voor mij perfect. Op een 17-incher moet je al heel wat childs hebben om te moeten scrollen en dan nog vind ik het niet zo erg, je werkt toch dan enkel rond dat elementje, dus de rest hoeft niet zichtbaar te zijn.

[Folkert]

Ik werk vaak met @imports. Op deze manier kan je per onderdeel een css maken en deze in je main css inladen. Dus in deze css komt een lijstje imports en dan kan je heel overzichtelijk per onderdeel je css bepalen.

stylesheet.css:

Cascading Stylesheet:

/*************************************/
/******* PROJECT               *******/
/*************************************/

/*******************************/
/*       CSS INCLUDES          /
/*******************************/

@import "knoppen.css";
@import "inloggen.css";
@import "webparts/forum.css";
@import "webparts/nieuws.css";
etc...

En je kan hiermee een duidelijke structuur binnen de css directory aanmaken.
Tevens kan je eindeloos combineren en stijlen weglaten of toevoegen, 'overrulen' etc...

[ Voor 69% gewijzigd door Folkert op 12-02-2004 18:41 ]

[CH4OS]

[rml][ RFC] (x)html & CSS reference *[/rml] daarin staat een link naar: hier
Deze site schijnt het een en ander voor je uit te leggen, hoe je het goed op kán zetten e.d.