[CSS] Efficient css schrijven?

[DeFeCt]

Het maken van een css gaat me niet slecht af, echter blijf ik vaak twijfelen of het niet efficienter had gekund. Classes die erg op elkaar lijken en overerving die misschien makkelijker had gekund.

Op het web is van alles te vinden over wat je moet schrijven om eea te bereiken, maar ik heb nog niks kunnen vinden over hoe je zoiets nou het beste aanpakt. Hoe maak je optimaal gebruik van de eigenschappen van css.

Enniewee hier komt eigenlijk de volgende vraag uit voort:

Wat is de juiste inhoudelijke en technische strategie om een
stylesheet op te zetten?

Graag jullie mening, tips, hints, tricks en zinloze opmerkingen.

[disjfa]

voor plain html of zoiets met php/asp/jsp?

voor dat laatste zou ik iig met classes en id`s werken... de classes als kleur en font en de id`s een beetje met grootes en special effects laten doorgaan

[DeFeCt]

Op vrijdag 22 maart 2002 11:38 schreef disjfa het volgende:
voor plain html of zoiets met php/asp/jsp?

Wat is het verschil?

Op vrijdag 22 maart 2002 11:38 schreef disjfa het volgende:
voor dat laatste zou ik iig met classes en id`s werken... de classes als kleur en font en de id`s een beetje met grootes en special effects laten doorgaan

Dat is dus niet de vraag. Waar het om gaat is hoe je nou bepaald wat de juiste structuur is van je css.

Dus met zo min mogelijk classes en id's zoveel mogelijk coveren.
Hoe pak je dat aan?
Wat moet je laten overerven en hoe doe je dat zo functioneel mogelijk?

[disjfa]

Op vrijdag 22 maart 2002 11:44 schreef DeFeCt het volgende:

[..]

Wat is het verschil?
[..]

Dat is dus niet de vraag. Waar het om gaat is hoe je nou bepaald wat de juiste structuur is van je css.

Dus met zo min mogelijk classes en id's zoveel mogelijk coveren.
Hoe pak je dat aan?
Wat moet je laten overerven en hoe doe je dat zo functioneel mogelijk?

het verschil is als je met plain html werkt dat je dan makkelijker een paar styles meer kan maken en als je dan met script werkt dan kun je bv een table een bepaalde lettertype en kleur meegeven en alleen bij bepaalde bv. kopstukken een extra id meegeven.
dat laatste kun je idd ook met plain html doen, maar dat maakt t zo onoverzichtelijk (uit ervaring )

maarja

[r0bert]

Je kunt bijvoorbeeld voor allerlei dingen, aparte classes aanmaken en die combineren.

vb:

code:

.defaultFont {
    font-family: Verdana;
}

.defaultColor {
    color: red;
}

.blueColor {
    color: blue;
}

code:

<span class="defaultFont defaultColor"> rode tekst in verdana </span>
<span class="defaultFont blueColor"> blauwe tekst in verdana </span>

[RM-rf]

ik men dat W3C CSS-validator een dubbelle definiering van een class of ID afkeurt, dat is nogal ergerlijk (zelfs bert bos van de W3C-CSS-group, die de Style-pages van W3C gemaakt heeft, maakte juist daarvan veel gebruik, en zag dat als een methode om backwards compatibility te garanderen)

bv.

code:

.classEen, .classTwee
{
   margin: 10px;
}
classTwee
{
   margin-left: 2px;
}

tegenover

code:

.classEen
{
   margin: 10px:
}
.classTwee
{
   margin: 10px 10px 2px 10px;
}

niet dat de eerste echt beter is, of kleiner, maar gevoelsmatig komt dit me vaak beter bij, vaak werk je standaard diktes en in bepaalde uitzonderingsgevallen wijk je ervanaf, niet andersom (en ik kan maar niet met de shorthand van margin met 4 waardes werken, weet nooit wat wat is)

dit lijkt me balngrijker dan of je echt bits en bytes aan laadtijd bespaart, dat zal vaak minimaal zijn, beter is om een geveolsmatig juiste en een logische consequente syntax te hanteren

Op vrijdag 22 maart 2002 11:47 schreef r0bert het volgende:
Je kunt bijvoorbeeld voor allerlei dingen, aparte classes aanmaken en die combineren.

code:

<span class="defaultFont defaultColor"> rode tekst in verdana </span>
<span class="defaultFont blueColor"> blauwe tekst in verdana </span>

behalve dat dat weinig backwards compatible is (msie5- en ns4x doen het niet meen ik, daarmee valt het voor professioneel gebruik af, voorlopig)

daarnaast is het idee hierachter ook nogal beperkt, je gaat dan eigenlijk weer terug naar style-definities als attribuut aan de tag en ook nog eens 'lelijk in 1 class-attribuut verweven (als je gaat scripten moet je een regex gaan toepassen om eventueel de gebruikte classes eruit te filteren)

het gebruik van een class ter definitie van een specifieke waarde van een tekstelement is een bekend typografisch gebruik al van voor html (in Quark heten ze typogrammen) en zelfs voor dtp in ontwerp - en layout- opzetten gebruikt

wat wel bruikbaar zou zijn om beter met definieerbare variabelen in propertiedefinities binnen tags te kunnen werken

[Verwijderd]

Op vrijdag 22 maart 2002 11:34 schreef DeFeCt het volgende:

....

Enniewee hier komt eigenlijk de volgende vraag uit voort:

Wat is de juiste inhoudelijke en technische strategie om een
stylesheet op te zetten?

Graag jullie mening, tips, hints, tricks en zinloze opmerkingen.

Wat ik een goede site vind is deze:

http://www.richinstyle.com/

En verder zou je kunnen overwegen zoveel mogelijk 'shorthand' kunnen gebruiken, dus:

code:

BODY{background : White url(plaatje.gif) no-repeat fixed left;}

In plaats van

code:

BODY{
background-color : White;
background-image : url(plaatje.gif);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : left;
}

Mijn 2 centen: Volgens mij is de beste manier om css te schrijven als je de html HELEMAAL af hebt (ik doe het nogal eens simultaan, dat geeft nogal eens gepruts )

[Bosmonster]

ik vin die moederloze classes uberhaupt niet zo netjes imho..

.className

enzo doe dan

span.className

Dan maak je een span-class aan, etc..

[DeFeCt]

Op vrijdag 22 maart 2002 11:55 schreef RM-rf het volgende:
niet dat de eerste echt beter is, of kleiner, maar gevoelsmatig komt dit me vaak beter bij, vaak werk je standaard diktes en in bepaalde uitzonderingsgevallen wijk je ervanaf

Dus zou je zeggen definieer die standaard diktes in je body zodat de rest ze overerft, toch?

Op vrijdag 22 maart 2002 11:55 schreef RM-rf het volgende:
// dammit weet nooit of de derde positie ook left- is ..
// kan ook tweede zijn, moet ik weer opzoeken
}[/code]

TopStyle is er toch ook voor de mac?

Op vrijdag 22 maart 2002 11:59 schreef Milkman_Dan het volgende:
Mijn 2 centen: Volgens mij is de beste manier om css te schrijven als je de html HELEMAAL af hebt (ik doe het nogal eens simultaan, dat geeft nogal eens gepruts )

Volgens mij ligt daar mijn probleem ook. Je bedenkt iets, maakt een class aan, en gaat weer verder...

[Booster]

Ik wil soms nog wel eens het overzicht kwijtraken, daarom dacht ik slim te zijn en

code:

@import url();

te gebruiken.

Echter, helaas: IE verslikt zich dan wel eens met het inlezen van de CSS.
Zoiets als:
Je hebt je site.css en hierin staan imports naar table.css en content.css.

IE leest de site.css, en bouwt hierna gelijk de site op, terwijl hij dus nog 2 extra stylesheets moet inlezen. Mateloos irritant. Gelukkig is dit dan na 1 refresh meestal wel weg, maar gelijk niet meer bruikbaar dus.

Verder ben ik voor het goed indelen van mijn CSS, weinig shorthand want daar raak ik van in de war, alles netjes onder elkaar zetten e.d.

[disjfa]

Op vrijdag 22 maart 2002 12:14 schreef Booster het volgende:
Ik wil soms nog wel eens het overzicht kwijtraken, daarom dacht ik slim te zijn en

code:

@import url();

te gebruiken.

klopt, die kun je omzetten met jscript. maar je kunt ze niet zo samen gebruiken. had ik laatst iets over gelezen

[Pelle]

Op vrijdag 22 maart 2002 12:14 schreef Booster het volgende:
Ik wil soms nog wel eens het overzicht kwijtraken, daarom dacht ik slim te zijn en

code:

@import url();

te gebruiken.

Probleem ben ik ook wel eens tegenaan gelopen; ik doe het nu altijd zo:

code:

<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
<!--
    @import ie.css;
-->
</style>

..en dan werkt het wel

M'goed, back to de originele vraag. Zelf probeer ik alles in ieder geval zo veel mogelijk te laten overerven, maar met NS4 gaat dat zo vaak fout dat je vaak toch bent overgeleverd aan het compleet vullen van je classes met alle attributen die nodig zijn.

Het liefst zou ik voor m'n <body> een default-font (en-grootte, en -kleur) meegeven, maar dat gaat al fout als je dat ergens tekst in een table, of zelfs onder die table hebt.

En dus doe ik alles nog lekker omslachtig; ook IE5 heeft nog teveel problemen met inheritance van properties dus ik geef al m'n classes, id's & selectors gewoon alle attributen mee die van toepassing zijn.

[Verwijderd]

Zolang de browsers nog steeds een gigantische overhead op het gebruik van className veroorzaken op snelle bak ben ik nog steeds genoodzaakt om serverside hard de style te definieren in zowel de tags als in de jscript.

[Dennis]

Op vrijdag 22 maart 2002 12:31 schreef Gordijnstok het volgende:
Zolang de browsers nog steeds een gigantische overhead op het gebruik van className veroorzaken op snelle bak ben ik nog steeds genoodzaakt om serverside hard de style te definieren in zowel de tags als in de jscript.

Jij vind dus puur de reden dat de CSS niet snel genoeg laadt aanleiding om gewoon dingen als <font> etc. te gebruiken?

1 woord:

[Verwijderd]

Op vrijdag 22 maart 2002 12:28 schreef Pelle het volgende:

[..]
Het liefst zou ik voor m'n <body> een default-font (en-grootte, en -kleur) meegeven, maar dat gaat al fout als je dat ergens tekst in een table, of zelfs onder die table hebt.

body, td{...} werkt meestal wel.

[disjfa]

Op vrijdag 22 maart 2002 13:13 schreef tvlxd het volgende:

[..]

body, td{...} werkt meestal wel.

body is eigenlijk genoeg hoor, maar je mag t idd ook zo doen jah

[Verwijderd]

Op vrijdag 22 maart 2002 13:15 schreef disjfa het volgende:

[..]

body is eigenlijk genoeg hoor, maar je mag t idd ook zo doen jah

Body hoort het alleen wel te doen ja, maar omdat in TD's dat vaak niet wordt overgenomen (bug of hoort dat zo?) is td er achter ook handig, als je tenminste tables gebruikt voor je lay-out (foei, tvlxd), fo ergens anders voor.

[drm]

Ik vind persoonlijk dit 1 van de mooiste en netste manieren om CSS te schrijven (is btw 2^e generatie, en werkt niet in de "wat oudere browsers", weet niet precies welke versies wel en niet...)

code:

body {
   ...
}

table.overview {
   ...
}

/* Alle children en descendants van table: */
table.overview * {

}

table.overview td.link a {
   ...
}

table.overview td.link a:hover {
   ...
}

.text a {
   ...
}

.text a:hover {
   ...
}

code:

<table class="overview">
   <tr>
    <td class="link"><a href="#">blaat</a></td>
   </tr>
   <tr>
    <td class="text">
         blaterdeblaatblaaaat 
         <a href="#">nog eens melp</a>
      </td>
   </tr>
</table>

Je definieert dan op basis van de context van het element welke styles hij heeft. Ben ik wel aardig fan van

_{edit: hmmm layout verneuking ...}

[Booster]

Op vrijdag 22 maart 2002 12:28 schreef Pelle het volgende:
Probleem ben ik ook wel eens tegenaan gelopen; ik doe het nu altijd zo:

..en dan werkt het wel

Ik zal het eens proberen, bedankt

Over de topic, ik ben gewoon bang dat echt effectief schrijven een redelijke onmogelijkheid wordt met de huidige range aan browsers die je als webdesigner wilt/moet ondersteunen.

[2]

Ik probeer stylesheets eigenlijk altijd toe te passen zoals ik dat doe bij opmaak voor print in kwark. Een bepaalde hierarchie erin te brengen; bovenaan staat altijd body,td { bla } die alle text dekt op de pagina, alles wat dan nog andere properties kent definieer ik apart. Punt is dan wel idd dat je soms bijv. dingen als font-family 2x definieert, maar dat boeit me niet zo.

[Hangloozz]

zoals 2 probeer ik ook de volgorde van tag-afrolling te volgen met m'n sheet, warbij ik alle custom classe als laatste in de rij zet:

code:

body,td,p{  }

div{ }

a{  }
a.class{  }
a.custom class{  }

.custom class{  }

Ik weet zeker dat het niet de meest efficiente manier is, daarom vindt ik het wel een interressant topic omdat ik ook al vaker met die gedachte rondliep: dit kan beter.

Maar hoe..

Ik moet zeggen dat ik de voorgestelde mogelijkheden nog wat mager en niet overtuigend vindt.
Die van drm is zeer zeker het overwegen waard, maar ik had CSS bouw op hoger niveau verwacht.. no offence btw, want zelf bak ik er ook niet zoveel van

de al voorgestelde richinstyle geeft best wel goede adviezen mbt CSS samenstelling.
Ben daar in m'n begindagen van het CSS leertraject vaak geweest, alleen begreep ik er toen (nog )minder van.. tijd om daar maar weer eens in studie te gaan.

[drm]

Hangloozz:
Die van drm is zeer zeker het overwegen waard, maar ik had CSS bouw op hoger niveau verwacht.. no offence btw, want zelf bak ik er ook niet zoveel van

none taken, ofcourse

Het probleem is een beetje, dat je ongelooflijk veel kanten op kan met de specificatie van CSS2, maar dat het zo ongelooflijk brak ondersteund wordt. De enige die het allemaal redelijk goed onder de knie heeft is Mozilla, en dan praat je nou niet echt over de leading browser. Dan heeft het niet zo veel zin om allerlei mooie constructies te bedenken, snappie?
_{ik wil maar zeggen, ik kan wel beter maar daar heb je niks aan}

[DeFeCt]

Op zaterdag 23 maart 2002 00:06 schreef Hangloozz het volgende:
Ik moet zeggen dat ik de voorgestelde mogelijkheden nog wat mager en niet overtuigend vindt.
Die van drm is zeer zeker het overwegen waard, maar ik had CSS bouw op hoger niveau verwacht.. no offence btw, want zelf bak ik er ook niet zoveel van

Draadje is over het weekend heen en de reacties vallen me eerlijk gezegd tegen.
Maar misschien moet ik daar dan maar mijn conclusie uit trekken.

Ik had verwacht dat er een pas klaar antwoord zou zijn maar misschien zijn de verschillende interpretaties van de browsers wel de oorzaak dat er dus niet 1 efficiente manier bestaat.

Het stelt me wel gerust dat ik niet de enige ben die twijfeld aan z'n eigen geschreven css

[Hangloozz]

Op maandag 25 maart 2002 10:33 schreef DeFeCt het volgende:
Draadje is over het weekend heen en de reacties vallen me eerlijk gezegd tegen.
Maar misschien moet ik daar dan maar mijn conclusie uit trekken.

Ik had verwacht dat er een pas klaar antwoord zou zijn maar misschien zijn de verschillende interpretaties van de browsers wel de oorzaak dat er dus niet 1 efficiente manier bestaat.

Het stelt me wel gerust dat ik niet de enige ben die twijfeld aan z'n eigen geschreven css

mja, het is inderdaad vrij mager qua reacties...
Ik had eigenlijk van ddc nog wel een goede voorzet verwacht want hij is volgens mij veel bezig met CSS.

De conclusie die ik eruit trek is dat de veel /13'ers wel CSS toepassen maar toch ook niet goed weten hoe ze dat voor zichzelf gestructureerd kunnen doen.
Zeg maar het gevoel dat je had toen je dit topic opende, DeFeCt

Of de browsers de schuld zijn van het lichtelijk stuurloos CSS schrijven weet ik niet..ik voel dat niet zo, je kunt tenslotte altijd nog een check schrijven die naar de juiste CSS refereert.
Tuurlijk, meer werk omdat je verschillende stylesheets moet maken en onderhouden, maar minder werk dan 3 of 4 versies van je site maken om alle bezoekers/opdrachtgevers tevreden te stellen, toch?

Anyways, je staat niet alleen in de anarchistische wereld van het CSS

[drm]

Ik vind het wel lollig dat je het anarchistisch noemt, want CSS is idd een anarchistische taal te noemen, gezien de hierarchie slecht terug te vinden is

[Verwijderd]

Om heel eerlijk te zijn maak ik zoveel mogelijk aparte classes aan. Dan kom ik later ook niet met problemen te zitten dat bepaalde stijlen ongewikkeld inherited worden.

Ik hou zo per onderdeel en per stijl veel meer overzicht in wat ik doe, in wat er gewijzigd kan worden, en wat het resultaat is. Dat vind ik persoonlijk efficienter dan diverse styles en classes gaan combineren.

[drm]

_{4:00 redelijk vroeg voor cup-a-soup...
</offtopic>}