[CSS] CSS file herschrijven/ordenen

[DivZero]

Hallo Tweakers,

Ik run de volgende website: www.vastniet.nl en deze draait op Joomla! CMS.

Hier zat uiteraard een vrij CSS file bij en tijdens de ontwikkeling van de website heb hier dingen aan veranderd en toegevoegd. Maar blijkbaar luisteren FF en IE verschillend naar CSS dus toen ik het zaakje IE compatible ging maken zag het er ehm... anders uit dan in firefox. Na veel geklooi heb ik alles wel werkend gekregen. Maar het gevolg was een vrij logge (lees grote) CSS die niet netjes is geordend. Ik ben nu bezig met mijn site te optimaliseren en ik wil eerst de CSS file zo compact en geordend mogelijk maken. En vervolgens mijn template op de site zoveel mogelijk omzetten naar CSS (dus de tables).

knip

Zoiets moet compacter kunnen maar ik weer niet precies hoe. Ik ben dus op zoek naar een aantal tips waarmee ik structereel mijn CSS bestand mee kan doorwerken zodat het allemaal blijft werken (goh), maar leesbaarder is, geen dubbele gegevens meer bevat en uiteindelijk dus iets kleiner is dan de huidige 18! KB.

Alvast heel erg bedankt! Mocht iemand overigens een goede link weten voor de CSS tabellen vervanging, dan is dat ook welkom

[ Voor 95% gewijzigd door André op 22-06-2006 19:55 . Reden: Te veel code ]

[djluc]

Je weet toch dat je dingen kunt groeperen? dus .class1, .class2 {color:red;}

[DivZero]

djluc schreef op donderdag 22 juni 2006 @ 19:17:
Je weet toch dat je dingen kunt groeperen? dus .class1, .class2 {color:red;}

Nee dus... Dit soort tips zoek ik ja. Bedankt!

[orf]

En denk ook aan overerving
Als je vvor aan a{} een kleur, image / font / line-height hebt bepaald, dan hoef je dat niet ook nog eens voor a:hover{} en a:visited{} te doen (mits die zaken niet veranderen bij een hover)

[Rigi]

Ik zou zeggen loop 's een rondje bij http://www.w3schools.com/css/default.asp
De ik zie bij de login box bv 4 regels over de verschillende borders:p dat kan je vervangen door één regel. border:solid 0px #000000.
padding/margin kan je gewoon 0px; achter zetten als je 4 dezelfde waardes wilt, etc

[DivZero]

orf schreef op donderdag 22 juni 2006 @ 19:24:
En denk ook aan overerving
Als je vvor aan a{} een kleur, image / font / line-height hebt bepaald, dan hoef je dat niet ook nog eens voor a:hover{} en a:visited{} te doen (mits die zaken niet veranderen bij een hover)

Ja dat overerving deed Firefox heel braaf. En toen ging Internet exploder de boel verpesten... Of misschien was het gewoon mijn slechte code.

Ik ben op mijn andere scherm lekker de CSS aan het aanpassen.. En de volgende vraag kwam in mij op. In de body {} staat al: font-family: Verdana, Arial, Helvetica, sans-serif;
Ik zie dat die verder op heel veel plaatsen voorkomt. De hele site maakt gebruik van dat lettertype. Kan ik hem dan overal verder weghalen? I.v.m overerving?

[André]

Ik heb de lap code weggehaald, plaats dan een link ofzo maar niet zo'n groot stuk.

[user109731]

DivZero schreef op donderdag 22 juni 2006 @ 19:27:
Ik zie dat die verder op heel veel plaatsen voorkomt. De hele site maakt gebruik van dat lettertype. Kan ik hem dan overal verder weghalen? I.v.m overerving?

Jep. Had je ook gewoon ff kunnen proberen natuurlijk

Ja dat overerving deed Firefox heel braaf. En toen ging Internet exploder de boel verpesten... Of misschien was het gewoon mijn slechte code.

Dat moet in IE ook gewoon werken. Zet in je :hover, :active ed echt alleen datgene wat veranderd moet worden, wat hetzelfde kan blijven hoeft er niet bij.

En

Cascading Stylesheet:

table.moduletable {
  margin: 0px 0px 0px 0px;
  width: 95%;
  border-left: solid 0px #000000;
  border-right: solid 0px #000000;
  border-top: solid 0px #000000;
  border-bottom: solid 0px #000000;
  margin-left: 0px;
}
/* kan zo: */
table.moduletable {
  margin:0;
  width:95%;
  border-width:0;
}

Het valt me verder op dat je enorm vaak color:#000000; gebruikt. Is dat wel echt nodig?

[DivZero]

Bedankt voor de tips mensen. Ik heb gevonden wat bij mij al die problemen veroorzaakte... er stonden ergens wat komma's waar ze niet hoorden te staan. Dus zoals ik al zei.. mijn slechte codering

Alles werkt nu weer zoals het moet en heb de 19kb al naar 15kb weten terug te brengen.

De admin heeft de code verwijderd, maar de actuele code is hier te zien:

http://vastniet.nl/templates/geel/css/template_css.css

Ik ga hier nog een aantal uurtjes aan knutselen en wanneer ik hem goed en geordend vind mogen jullie er nog een kritisch oogje op werpen. Maar dan post ik hier gewoon een updateje.

Nogmaals bedankt

[lullebakman]

Dat is niet nodig (je kan trouwens ook #000 gebruiken => elk cijfer wordt verdubbeld.)

http://www.cleancss.com/

[BasieP]

Lullebakman schreef op donderdag 22 juni 2006 @ 21:09:
Dat is niet nodig (je kan trouwens ook #000 gebruiken => elk cijfer wordt verdubbeld.)

http://www.cleancss.com/

of 'black' leest wat makkelijker enzo

[DivZero]

of 'black' leest wat makkelijker enzo

Lees je geen hex dan?

Die clean css site is trouwens geweldig!

[ Voor 9% gewijzigd door DivZero op 22-06-2006 21:21 ]

[Verwijderd]

ik weet niet of het voor jou van toepassing is, en erg overzichtelijk is het ook niet altijd, maar als je een bepaalde eigenschap aan veel dingen toevoegt kun je dat ook groeperen, en vervolgens de unieke eigenschappen later doen.. bijvoorbeeld:

Cascading Stylesheet:

a, td {
  color : red;
}

td {
  font-size : 12pt;
}

a {
 font-size : 12pt;
}

bij bovenstaand voorbeeld levert het eigenlijk niks op, maar in sommige gevallen kan het schelen, en kun je bijvoorbeeld een kleur die je op veel plaatsen gebruikt op 1 plaats in je file kwijt

[Verwijderd]

Een paar dingetjes:

Cascading Stylesheet:

Bij veel dingen staat:

margin:0;
padding:0;

Dat zou je ook zo kunnen doen:

*{
margin:0;
padding:0;
}

En dan bij de dingen die wel margin/padding nodig hebben dat gewoon toevoegen.

Cascading Stylesheet:

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:700;

Kan korter:

font:700 16px Verdana, Arial, Helvetica, sans-serif;

Dit is wel handig daarvoor: Goede info over CSS-shorthands

Grote prutser schreef:

Cascading Stylesheet:

table.moduletable {
  margin: 0px 0px 0px 0px;
  width: 95%;
  border-left: solid 0px #000000;
  border-right: solid 0px #000000;
  border-top: solid 0px #000000;
  border-bottom: solid 0px #000000;
  margin-left: 0px;
}
/* kan zo: */
table.moduletable {
  margin:0;
  width:95%;
  border-width:0;
}

Kan beter zo:

Cascading Stylesheet:

table.moduletable {
  margin:0;
  width:95%;
  border:0;
}

Dat scheelt wel 6 tekens

[ Voor 3% gewijzigd door Verwijderd op 23-06-2006 14:36 ]