[Discussie] Volgorde CSS Statements

[Kayshin]

Ik vraag me eigenlijk af: Wat is de meest nette manier om de statemensts in je CSS neer te zetten?

Wat ik namelijk doe is eerst mijn globale layout maken en dan maar tussenvoegen waar het moet, maar zo wordt het best wel onoverzichtelijk.

Ik heb er al eens over nagedacht dat de meest belangrijke dingen bijvoorbeeld bovenaan komen te staan, maar dan kom ik uit op de vraag: wat is belangrijker, width+height of bijvoorbeeld position.

Wat is jullie gedachte hierover?

[NMe]

Ik let persoonlijk niet zo op de volgorde. Ik zet wel de definities van bij elkaar horende klassen bij elkaar, en ik zorg dat de vermeldingen van dingen als width/height in elk geval consequent zijn, dus niet dat ik bij de ene klasse eerst position regel en daarna width, en bij een andere klasse precies andersom. Verder maakt het niet echt uit volgens mij, als je het maar overzichtelijk houdt.

[Kayshin]

Dat is dus het probleem dat ik heb: Bij elke klasse doe ik het anders.

Ook heb ik deze vraag ivm leesbaarheid voor andere personen, voor als er ergens een fout zit die je niet kan vinden of als je bijvoorbeeld ergens aan samenwerkt (School oid). Is er geen standaard voor?

[OzBoz]

Ik doe zelf iets wat ik gewoon wel praktisch vindt. Ik hou de volgorde aan van de items zoals deze ook uiteindelijk binnen de layout te zien zijn. Dus een footertje vindt je bij mij onderaan ergens in CSS. Natuurlijk heb je een aantal elementen die overal gebruikt worden, die staan dan lekker of boven, of onderaan.

[Kayshin]

Ik heb het hier ook niet over de elementen, die staan goed. Body bovenin, dan header, menu, content, content divs, footer etc.

Het gaat mij om de statements van de elementen zelf zoals position, color, font-weight etc.

[We Are Borg]

ben benieuwd of iemand een leuke volgorde heeft . Doe zelf wel height/width en color/bgcolor bij elkaar houden bijv, maar voor de rest is het compleet random

[0528973]

meestal alfabetisch, behalve met cursor: hand; cursor: pointer; Daarnaast lijn ik per block de : uit en indent ik. Zodra ik alle elementen van een short-hand notatie hetzelfde definieer gebruik de shorthand en anders voluit;

code:

#content
{
   backgrond-color : navy;
   font-size            : normal;
   padding             : 3px 6px;
}

[JHS]

Mijn volgorde :

Cascading Stylesheet:

body div#id p.class {
    display: none; visibility: hidden; overflow: auto;
    position: absolute; float: left; clear: both;
    width: xx%; _width: ; min-width: ; max-width: ; height: xx%; _height: ; min-height: ; max-height: ;
    top: ; left: ;
    margin: 0, 0, 0, 0; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
    padding: 0, 0, 0, 0; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
    border: 1px solid #f00; border-right: 1px solid #f00; (etc) border-right-width: 5px; (etc)
    color: #f00; background: ; background-color: ; background-image: ; background-position: ; background-repeat: ;
    font-size: ; font-family: Arial, Verdana, Sans-Serif; text-decoration: underline; 
    text-align: ; line-height: 1.2; text-indent 1.5em; font-weight: normal; font-style: italic;
    list-style: square inside url('bla.gif'); list-style-type: disc; list-style-image: url('bla.gif'); list-style-position: inside;
    cursor: hand;
} 

[sjaakaq]

Ik houdt altijd de volgorde van mijn HTML pagina aan. Dus als die is:

code:

html
 body
  container
  header
  content
   links
   rechts
  footer

. dan wordt mijn CSS dus ook in die volgorde. Dus eerst all body-specifieke dingen, dan alle container specifieke dingen etc. dus "header h3" komt voor "content" zegmaar, ook al is content minder specifiek.

[frickY]

Jammer dat je niet leest dat de statements worden bedoeld, en niet de elementen

Ikzelf heb een bepaalde prioriteiten lisjt welke bepaald welke volgorde ik gebruik
position komt altijd bovenaan, gevolgt door de magin, padding, en een eventleue float (welke ik zelden gebruik). Dan komen de width en de height. De font color komt altijd als laatste, met daar boven de fontstyle en de background.

De volgorde welke je gebruikt maakt imho niets uit, zolang je he tmaar consequent doet en niet elke keer wat anders verzint

Ik probeer het in principe een beetje semantisch te doen door vanuit een browser te denken. Om een blok te positioneren moet je eerst weten, jawel, hoe hij gepositioneerd moet worden. (position, margin, padding, float, width, height).
Vervolgens moet je weten hoe de elementen binnen het element eruit zien, bijv een tekstregel.
Van die tekstregel moet je het lettertype, grootte, stijl, lijn hoogt en woord afstand weten.
Etc.

Klinkt een beetje suf, maar in principe is er wel een logische volgorde, volgens mij.

@JHS
Ik ben blij dat ik jouw stylesheets niet hoef aan te passen. Waarom niet alles op een nieuwe regel met desnoods een comment tag erbij als je perse wilt groeperen?

[ Voor 16% gewijzigd door frickY op 20-02-2006 11:50 ]

[Vinzzz243]

Ik zorg er zelf altijd voor dat ik de positioning , breedte/hoogte en margin/padding het eerste gebruik. Pas daarna de color;font;background etc.

Puur en alleen voor het feit dat ik het meeste speel met het eerste gedeelte en ik in 1 oogopslag kan zien wat de waardes zijn (bij veel items moet je al naar rechts scrollen en dan vind ik background en color de minst waardevolle items als ik aant proggen ben)

[JHS]

frickY: Omdat ik graag zoveel mogelijk op één scherm wil zien . En in de praktijk is het, voor mij, niet eens zo onoverzichtelijk, d'r staan bijna nergens meer dan dan drie statements op één regel, en het is maar weinig dat het langer is dan een regel of 5/6...

[Sappie]

Over het algemeen eindigen position en alles wat daarmee eventueel te maken heeft (top, bottom, etc), width, height, margin en padding wel bovenaan, maar ik gebruik daarvoor geen standaardvolgorde. Ik zie verder het nut er ook niet van in om hiervoor een volgorde te definieren; als je alles niet in één oogopslag kan zien / vinden doe je mijns inziens toch al iets niet goed.

[Priet]

Ik doe het lekker op alfabetische volgorde, dan hoef je ook niet na te denken wat je optimale volgorde ook alweer was

[Verwijderd]

JHS schreef op maandag 20 februari 2006 @ 10:56:
Mijn volgorde :

Dat lijkt verdacht veel op wat ik altijd produceer

code:

overflow
display / visibility
position
left / top / right / bottom
width / height / min-width / min-height / max-width / max-height
margin
padding
border-width / border-style / border-color
color
background-color
background-image / background-position / background-repeat
font-size / font-weight / font-style
text-decoration / text-indent

En de z-index gebruik ik zo weinig dat die meestal helemaal aan het begin of eind van een blok komt.

Maar elke rule komt bij mij op een aparte regel.

[Vecodo]

mijn Css ziet er altijd als volgt uit
Eerst de Indeling van de pagina
( zoals hier al vaker vermeld is. )Dan de opmaak van fonts en dergelijke,Deze zijn altijd heel erg gescheiden.

Als indeling heb ik als volgt
height width boven aan, dan de background, dan postioneren, en dan overige
voorbeeld :

code:

/*-------------------------------------------#
#      CSS Indeling voor ***.nl      #
#--------------------------------------------*/
#Main_Container {
    width:780px;
    height:100%;
    background-color:#FFFFFF;
    margin:0 auto;
    border-left:1px solid black;
    border-right:1px solid black;
    }

[ Voor 38% gewijzigd door Vecodo op 20-02-2006 13:08 ]

[CaptBiele]

De standard tags staan bovenaan (die komen namelijk altijd terug, en is de plek dus wat meer consistent)

Voor de rest zet ik de classes ook in volgorde van layout. Dus .headers boven aan en .footers onderaan
En voor de properties zet ik nu de meest voorkomende bovenaan, dus height en width, etc. Voor de rest maakt het niet zo veel uit.
Maar ik denk dat ik het alfabetisch ga doen... heb je alle classes consistent.

[Verwijderd]

Bij mij is het meestal wel zo dat specifiekere selectors later in het document staan, om te voorkomen dat ik daar naar moet zoeken. Algemene style regels, zoals voor alle img elementen, het liefst dus bovenaan, om verwarring te voorkomen.

Voor de rest houd ik in grove lijnen de structuur van het document aan, maar doe ik tegenwoordig alle content-specifieke dingen bij voorkeur in een aparte stylesheet. Die kan dan namelijk mooi gerecycled worden voor gebruik in een CMS.

[Verwijderd]

de property volgorde boeit me echt geen ruk, vaak zijn het er ook niet heel veel per statement.

De volgorde van statements doe ik ruwweg in nesting volgorde, dus eerst *, html, body enzo, dan de block elementen, dan de inline elementen.

class en id selectors gebruik ik bijna niet, maar als ze erin zitten zitten bepaalde (pseudo)classen van elementen meteen na het betreffende element, de id selectors zijn speciale elementen die vaak helemaal onderaan komen:

vb:

Cascading Stylesheet:

*{}
html{}
body {}

/* block elementen */
div, map, form, fieldset, blockquote {}
p, pre {}
p.lede {}
ul, ol, dl {}
/* -- etc */

/* inline elementen */
a {}
a:hover {}
a:visited {}
/* etc */

/* speciale elementen */
map#main {}
div#block {}
/* etc */

soms zet ik na de block en inline elementen nog groepen voor table en form layout bij elkaar, als dit echt een flink blok is.

[Justice]

globaal (binnen categorie op alfabetische volgorde):
standaard tags
classes voor standaard tags
ids
classes voor ids
stand alone functionaltieit (zoals image replacement of js gebaseerde prut)


per tag,id,class of whatever volg ik gewoon het 'wie het eerst komt die het eerst maalt' principe, maar als ik bijvoorbeeld hacks oid moet toepassen komen deze wel met een witregel. En elke
property op een eigen regel ander is het nogal lastig lezen, je kan op deze manier aan de lengte van de property + value al herkennen wat het is (wanneer je snel scrollt)

Trouwens voor #ids zet ik NOOIT het element ervoor, dus geen div#content ofzo, want zou het onder geneal horen en verlies je het overzicht. Voor classes ligt het aan natuurlijk aan de logica.

O en bij grote projecten probeer ik nu aparte css files per functie te hebben: general styles, layout (ids only), inheader, infooter. Alleen dat is een beetje een utopie aangezien de general style best wel eens invloed kan hebben op je footer paragraaf bijvoorbeeld.

[ Voor 12% gewijzigd door Justice op 20-02-2006 14:23 ]

[MarkvE]

Ik sorteer de statements altijd op basis van lengte (aantal karakters van het statement), vraag me niet waarom, maar ik vindt het dan altijd wel lekker lezen en vervolgens raak je aan de volgorde gewend...

Cascading Stylesheet:

#content h2
{
    font: 26px arial, helvetica, sans-serif;
    width: 100%;
    padding: 10px 0 1px 0;
    background: #fff;
    text-indent: 2%;
}

[ Voor 7% gewijzigd door MarkvE op 20-02-2006 16:24 ]

[Blaise]

Ik hou geen volgorde aan binnen een selector want anders kan je niet lekker doortypen. Daarnaast heeft elke selector zijn eigen regel, anders scroll je je helemaal scheel.
­

Cascading Stylesheet:

#nav{float:left;width:180px;font-size:9px;margin:0;padding:0;position:relative;top:-1px}
#nav dt{margin:0 2px 0 0;padding:0;border:2px solid #545547;border-width:1px 0;background:#C9E924 url('img/streep.gif') repeat-y;text-transform:uppercase;font:normal bold 8px/18px verdana,sans-serif;letter-spacing:1px;text-indent:20px}
#nav dt.login{padding-top:100px}
#nav dd{margin:0 2px 0 0;padding:0}
#nav dd a{color:#000;display:block;position:relative;text-indent:20px;height:18px;border-top:1px solid #545547;background:#EE4F97 url('img/streep.gif') no-repeat;text-transform:uppercase;font:normal bold 8px/18px verdana,sans-serif;letter-spacing:1px}
#nav dd a:hover,
#nav dd a.hier{background-color:#E8E2D2;color:#000}

[sjaakaq]

Ik ook ongeveer; elke selector op een nieuwe regel en dan meestal position, display, width, height, float, background, font, color, padding, margin, rest.

[Bosmonster]

Mensen die hun CSS achter elkaar zetten moeten een goeie aframmeling krijgen.. dat komt er hier in ieder geval niet in. Leuk dat het je een enter scheelt, maar voor een ander is het gewoon drama om mee te werken, zeker als die regel 3 schermen breed wordt.

Cascading Stylesheet:

ele.classname {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 0 0 0;
    padding: 10px;
    border: 5px solid #f00;
    ...
}

Onderdelen netjes sorteren, als het teveel wordt, dan wordt het tijd ze te gaan onderverdelen in verschillende stylesheets..

De volgorde van de properties zal me werkelijk een worst wezen, ik zie zo wel wat het doet als het tenminste netjes onder elkaar staat...

[ Voor 27% gewijzigd door Bosmonster op 20-02-2006 19:58 ]

[sjaakaq]

Tja...dan zit je dus echt kilometers te scrollen. Zolang je elke selector op een nieuwe regel doet...

[LauPro]

Over dat verhaal van 'regels die drie schermen breed zijn', heeft niemand gehoord van wrapping c.q. regelterugloop .

[Blaise]

Mensen die hun CSS achter elkaar zetten moeten een goeie aframmeling krijgen.. dat komt er hier in ieder geval niet in. Leuk dat het je een enter scheelt, maar voor een ander is het gewoon drama om mee te werken, zeker als die regel 3 schermen breed wordt.

Bij mij hoeft er niemand anders mee te werken (ik doe de HTML, graphics en CSS, iemand anders de rest).

Maar dan nog: het gaat me er niet om dat het een enter scheelt, het gaat me erom dat het bij een beetje CSS al gauw 30 schermen hoog wordt als alles alles zijn eigen regel zou krijgen. Dat is op een andere manier onoverzichtelijk. Ik heb het geprobeerd en het beviel me niet. Ik wil het scrollen tot een minimum beperken, daarom zet ik de CSS waarden die ik aan het finetunen ben vooraan (links) zodat het scrollen echt tot een absoluut minimum wordt beperkt.

Maar zo heeft iedereen dus zijn systeem en daar is deze topic ook voor.

[Verwijderd]

LauPro schreef op maandag 20 februari 2006 @ 21:51:
Over dat verhaal van 'regels die drie schermen breed zijn', heeft niemand gehoord van wrapping c.q. regelterugloop .

Aaaaaaaaaaaaargh!!!

Alles op een nieuwe regel.
Nieuwe rule?
Nieuwe regel!
Nieuwe selector?
Nieuwe regel!
En uiteraard goed indenten, en duidelijke comments gebruiken om secties aan te geven:

/* -------------------------------------- */

Want op deze manier vind je veel sneller wat je hebben moet. Ook als je na een paar maanden nog eens iets moet wijzigen.

[MarkvE]

leokennis schreef op maandag 20 februari 2006 @ 21:47:
Tja...dan zit je dus echt kilometers te scrollen. Zolang je elke selector op een nieuwe regel doet...

Beide methoden hebben dus voordelen en nadelen, op meerdere regels is gemakkelijker te lezen en op één regel scheelt overbodig scrollen... Het is maar net wat je fijner vindt.

[LauPro]

Wat ik bedoel is een editor gebruiken die lange regels (die niet op het scherm/venster passen) automatisch laat teruglopen aan de linkerkant. Meestal gemarkeerd met een pijl zodat je weet dat deze regels bij elkaar lopen (of de regelnummering stopt even).

Dit lijkt mij een veel betere oplossing voor het 'slecht leesbaar probleem'/kilometers scrollen (shortcut maken voor fast-scroll?) dan de code zo op te maken dat hij ook nog in Notepad oid leesbaar is.

[MarkvE]

LauPro schreef op maandag 20 februari 2006 @ 22:11:
Wat ik bedoel is een editor gebruiken die lange regels (die niet op het scherm/venster passen) automatisch laat teruglopen aan de linkerkant. Meestal gemarkeerd met een pijl zodat je weet dat deze regels bij elkaar lopen (of de regelnummering stopt even).

Dit lijkt mij een veel betere oplossing voor het 'slecht leesbaar probleem'/kilometers scrollen (shortcut maken voor fast-scroll?) dan de code zo op te maken dat hij ook nog in Notepad oid leesbaar is.

Maar dan heb je nog steeds scrollwerk te verrichten

Ik persoonlijk vind het nog steeds niet leesbaar als je alles achter elkaar zet met text wrapping aan.

[faabman]

Het probleem met overzichtelijkheid heb ik opgelost door in mijn cms een aparte admin voor stylesheets te maken. Waarbij ik netjes een tabel krijg met daarin alle css items. Door consequent om te gaan met de benaming (opmaak alinea's / opmaak tabellen / etc.) weet ik het hele systeem voor verschillende sites redelijk overzichtelijk te houden. Hoe de stylesheet die er dan uiteindelijk uit komt er uitziet boeit me dan niet meer.

Binnen de admin groepeer ik properties meestal, dus:

Cascading Stylesheet:

display / float
width
height

padding
margin 
border

background (specified)

font
etc.

Eigenlijk altijd 1 property per regel tenzij ik maar 1 property te benoemen heb, dan hou ik het hele verhaal op 1 regel

dus:

Cascading Stylesheet:

a img{border:0;}

en:

Cascading Stylesheet:

a{
  color:black;
  text-decoration:none;
}

[Justice]

Maar je gebruikt geen spaties tussen de property en de value? of tussen de {}? Lijkt me dat ook leesbaarder persoonlijk.

[InZane]

JHS schreef op maandag 20 februari 2006 @ 10:56:
Mijn volgorde :

Cascading Stylesheet:

body div#id p.class {
    display: none; visibility: hidden; overflow: auto;
    position: absolute; float: left; clear: both;
    width: xx%; _width: ; min-width: ; max-width: ; height: xx%; _height: ; min-height: ; max-height: ;
    top: ; left: ;
    margin: 0, 0, 0, 0; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;
    padding: 0, 0, 0, 0; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
    border: 1px solid #f00; border-right: 1px solid #f00; (etc) border-right-width: 5px; (etc)
    color: #f00; background: ; background-color: ; background-image: ; background-position: ; background-repeat: ;
    font-size: ; font-family: Arial, Verdana, Sans-Serif; text-decoration: underline; 
    text-align: ; line-height: 1.2; text-indent 1.5em; font-weight: normal; font-style: italic;
    list-style: square inside url('bla.gif'); list-style-type: disc; list-style-image: url('bla.gif'); list-style-position: inside;
    cursor: hand;
} 

Argh! Zo krijg ik ze idd ook weleens voor me. Persoonlijk word ik er niet vrolijk van.
Bij mij komt alles op een nieuwe regel (tevens is dat een afspraak hier op m'n werk, omdat de kans groot is dat anderen er ook nog weleens wat in aan moeten passen). Volgorde boeit me verder niet zo erg. En comments gebruiken kan ook handig wezen bij de wat grotere stylesheets.

offtopic:
cursor: hand bestaat niet

[CaptBiele]

het gebruik van witruimte lijkt me sowieso noodzakelijk voor leesbaarheid.
Ik zet zelf alles op een nieuwe regel.

[Copyman]

De volgorde die ik gebruik lijkt sterk op die van JHS en Cheatah, alleen zet ik de properties stuk voor stuk op een nieuwe regel.

Cascading Stylesheet:

#header {
    width: 780px;
    height: 68px;
    background-color: #686666;
}

    #header h1 {
        float: left;
        height: 68px;
        width: 231px;
        margin: 0;
        background: url("images/logo.gif") no-repeat top left;
        text-indent: -9999px;
    }

Geneste elementen indent ik ook tegenover hun parent element, zoals je in mijn voorbeeld kan zien. Dit doe ik dan niet voor elke UL of LI, maar wel bij bijvoorbeeld selectors.

[Bosmonster]

InZane schreef op dinsdag 21 februari 2006 @ 10:22:
[...]


Argh! Zo krijg ik ze idd ook weleens voor me. Persoonlijk word ik er niet vrolijk van.
Bij mij komt alles op een nieuwe regel (tevens is dat een afspraak hier op m'n werk, omdat de kans groot is dat anderen er ook nog weleens wat in aan moeten passen). Volgorde boeit me verder niet zo erg. En comments gebruiken kan ook handig wezen bij de wat grotere stylesheets.

offtopic:
cursor: hand bestaat niet

Voor comments is het inderdaad ook wel zo handig

Cascading Stylesheet:

div.classname {
    cursor: pointer;
    cursor: hand; /* stupid IE */
    padding: 4px;
}

[Justice]

Ik zou de comments wellicht voor de regel plaatsen waarop ze van toepassing zijn, zodat wanneer je een automatic formatting optie krijgt de comment niet NA de regel gezet wordt, maargoed daar denk je alleen aan als je stylesweeper in topstyle oid gebruikt anders boeit het niet zo.

[OzBoz]

LauPro schreef op maandag 20 februari 2006 @ 21:51:
Over dat verhaal van 'regels die drie schermen breed zijn', heeft niemand gehoord van wrapping c.q. regelterugloop .

Omdat ze dan alsnog akelig in de hoogte zijn en vervolgens ook nog eens op vage plekken worden afgebroken? Ben het helemaal met Bosmonster eens. Opknopen die mensen.

Ik had inderdaad een beetje over de statements heen gelezen, maar zal me echt niet boeien welke volgorde die hebben. Dat zijn er maar een paar per class.

[Clay]

Ik had inderdaad een beetje over de statements heen gelezen, maar zal me echt niet boeien welke volgorde die hebben. Dat zijn er maar een paar per class.

Idem. Hoogstens staan wat belangrijkere dingen voor minder belangrijke, maar verder houd ik er geen volgorde op na. Wat ik wel consistent probeer te doen is duidelijke selectors schrijven inc. nodenames voor bv de id's en classes, die ook zo specifiek mogelijk iets selecteren, en waaraan je toch wel wat nesting kan afleiden zonder de source zelf te zien. Zo voorkom je ook dat er styles ergens - waar je dat niet wilt - toegepast worden door een te algemene regel.

Verder vind ik het belangrijk content componenten zo op te zetten dat ze makkelijk in meerdere mogelijke content gebeiden te stylen zijn. Zeker als je b.v. met een CMS werkt waarin je niet zonder meer kan zeggen dat een tekst of nieuws fragment alleen in bv een div#content voor kan komen. Voor mij liever div#content div.section h2 dan #content h2 dus.

beetje comment, beetje indent, klaar hoewel ook die al oud is

[sjaakaq]

OzBoz schreef op woensdag 22 februari 2006 @ 01:27:
[...]
Ben het helemaal met Bosmonster eens. Opknopen die mensen.
[...]

OMG

[Jorick]

OzBoz schreef op woensdag 22 februari 2006 @ 01:27:
[...]
... Opknopen die mensen. ...

Dat is misschien wel een beetje teveel van het goede hoor

Zoals JHS z'n style op maakt is misschien efficiënt qua aantal scrollbewegingen maar leesbaar word het er niet van. Ik gebruik zelf Dreamweaver 8 en die heeft code collapse (trouwens zat zat andere editors die ook code collapse hebben). Ik zelf collapse altijd wat al af is / toch even een tijdje niet aan hoef te werken en zo hoef je ook minder te scrollen plus dat het overzichtelijk blijft. Nadeel is wel dat je telkens je code moet collapsen als je het bestand weer opent.

[ Voor 26% gewijzigd door Jorick op 22-02-2006 13:11 ]

[Sappie]

Jorick schreef op woensdag 22 februari 2006 @ 13:07:
Nadeel is wel dat je telkens je code moet collapsen als je het bestand weer opent.

Een complete editor kan dit zelfs onthouden; als ik me niet vergis doet ultraedit (wat ik zelf veelal gebruik) dit.

[sjaakaq]

Jorick schreef op woensdag 22 februari 2006 @ 13:07:
[...]


Dat is misschien wel een beetje teveel van het goede hoor

Zoals JHS z'n style op maakt is misschien efficiënt qua aantal scrollbewegingen maar leesbaar word het er niet van. Ik gebruik zelf Dreamweaver 8 en die heeft code collapse (trouwens zat zat andere editors die ook code collapse hebben). Ik zelf collapse altijd wat al af is / toch even een tijdje niet aan hoef te werken en zo hoef je ook minder te scrollen plus dat het overzichtelijk blijft. Nadeel is wel dat je telkens je code moet collapsen als je het bestand weer opent.

Jup, I know, maar veel van mijn CSS edit ik in een online CMS (Pivot, WordPress) en die hebben dat niet; die hebben een gewone textarea...

[Otherside]

Het allerbelangrijkst is voor mij inderdaad elk ding op een nieuwe regel, dan maakt de volgorde (bijna) niet uit. Je kunt nog zo'n geweldige volgorde hebben, maar als ik ongeveer de hele css op 3 regels zie staan dan krijg ik meteen allergieuitslag...

[ Voor 3% gewijzigd door Otherside op 22-02-2006 16:08 ]

[R2D2]

Ik doe altijd eerst de lay out specifieke dingen zoals height, width, border etc etc en dan pas dingen als font color.

Style sheet bouw ik ook altijd netjes op in de volgende volgorde 1 - tabel/div opbouw van de pagina zelf (ja ik gebruik nog regelmatig tabellen maar ik noem mezelf ook geen die hard webdesigner ), 2 core lay out zoals font's, link kleurtjes etc etc en op 3 de speciefieke dingen als popup login vensters, of andere dingen die weinig voorkomen.

En uiteindelijk ziet het er dan ongeveer zo uit,

code:

.outer{width:900px; border:4px solid #ffffff; background-color:#ffffff; margin-top:0px;} 
.image{width:100%; background-color:#ffffff; border:2px solid #ffffff;} 
.top_modules{width:100%; background-color:#ffffff; border:2px solid #ffffff;}

Alles op 1 regel dus, ik werk persoonlijk graag met dreamweaver en als ik wat zoek gebruik ik de CTRL+F wel..... zit meteen een handige replace all functie knop in