Spagetti-Code in CSS entfernen

[sheeba1507]

Hallo zusammen,

da ich gerade dabei bin, meine CSS-Dateien etwas zu überarbeiten,
möchte ich auch gleich den "Spagetti-Code" entfernen.
Dieser Ausdruck ist mir aufgefallen, als ich meine Seite durch den
Qualidator geschossen habe.

Leider weiß ich nicht, was alles unter "Spagetti-Code" fällt.
Könnte sich 'mal jemand meine CSS anschauen und mir einen
kleinen Denkanstoß geben ?

Gruß, Mike

[sejuma]

AW: Spagetti-Code in CSS entfernen

Der Begriff Spagetti-Code ist mir neu.
Meinst du damit solche Dinge?

padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 15px;

Das lässt sich abkürzen:

padding: 10px 15px 10px 5px;

Gleiches gilt für margin.
Immer im Uhrzeigersinn, beginnend mit 12 Uhr (=padding-top)

Oder statt

font-size: 14px;
  font-weight: bold;

einfacher

font: bold 14px;

Weitere Möglichkeiten siehe hier.

[Ingo]

AW: Spagetti-Code in CSS entfernen

Hi,

Leider weiß ich nicht, was alles unter "Spagetti-Code" fällt.

ich auch nicht, aber mir fallen vier Dinge bei Deinem CSS auf:
uneinheitliche Einrückungen
unnötige bzw. mehrfache Angaben
unzutreffende Angaben
Verzicht auf Kurzschreibweise.

Zum Beispiel:
* { padding: 0; margin: 0; }
#content { margin: 0; padding: 0; }
Selbst wenn ein DIV ein voreingestelltes margin hätte, gälte die Angabe für *

#navi li a { height: 22px; list-style-type: none; }
diese beiden Eigenschaften treffen auf a nicht zu.

#navi { padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 15px; }
-> padding:10px 15px 10px 5px;

Gruß
Ingo

[sheeba1507]

AW: Spagetti-Code in CSS entfernen

@sejuma

padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 15px;

-->
padding: 10px 15px 10px 5px;

... diese Art der Codierung ist der Grund für die jetzt anstehende
Überarbeitung. Während meiner Lern-Phase habe ich aus Gründen der
Übersichtlichkeit die lange Codierungs-Weise gewählt.

font-size: 14px;
font-weight: bold;

-->
font: bold 14px;

... siehe oben.





Hallo Ingo,

uneinheitliche Einrückungen

... wenn du damit die Einrückungen im Quelltext (per Editor) meinst,
dann ist mir das auch schon aufgefallen.
Im Weaverslave wird aber die Einrückung absolut korrekt angezeigt.

Zum Beispiel:
* { padding: 0; margin: 0; }
#content { margin: 0; padding: 0; }
Selbst wenn ein DIV ein voreingestelltes margin hätte, gälte die Angabe für *

... das heißt, welcher Eintrag ist hier überflüßig : * oder der im div ?

#navi li a { height: 22px; list-style-type: none; }
diese beiden Eigenschaften treffen auf a nicht zu.

... diese Codierung habe ich aus der Vorlage.
Bislang funzt sie auch. Ich wüßte jetzt nicht, was hier nicht
zutreffen sollte.

#navi { padding-top: 10px; padding-bottom: 10px; padding-left: 5px; padding-right: 15px; }
-> padding:10px 15px 10px 5px;

... siehe oben.

Die lange Codierungs-Weise wird bereits überarbeitet.
Wird aber eine ganze Weile dauern.

Gruß, Mike

[sejuma]

AW: Spagetti-Code in CSS entfernen

Wenn du * {padding: 0; margin:0;} belässt, kannst du es überall rauslöschen.

Hier kannst du "a" weglassen, also :

#navi li { height: 22px; list-style-type: none; }

Solche Sachen sind auch überflüssig:

height: auto;

[sheeba1507]

AW: Spagetti-Code in CSS entfernen

Wenn du * {padding: 0; margin:0;} belässt, kannst du es überall rauslöschen.

... werde ich bei der Überarbeitung beachten.

Hier kannst du "a" weglassen, also :
#navi li { height: 22px; list-style-type: none; }

Nö, muß drin bleiben, sonst wird das Navi-Layout zerbröselt.
Hab's gerade 'mal getestet, sieht sehr krass aus.

Solche Sachen sind auch überflüssig:
height: auto;

... habe ich mir bereits gedacht. Werde es entfernen.

Gruß, Mike

[Ingo]

AW: Spagetti-Code in CSS entfernen

Hi,

... wenn du damit die Einrückungen im Quelltext (per Editor) meinst,
dann ist mir das auch schon aufgefallen.
Im Weaverslave wird aber die Einrückung absolut korrekt angezeigt.

dann vermute ich, dass Du mal mit Tabs und mal mit Leerzeichen eingerückt hast. Das ist dann nur bei einer bestimmten Editoreinstellung für Tabs gleich.

... das heißt, welcher Eintrag ist hier überflüßig : * oder der im div ?

im div auf jeden Fall - weil das wie gesagt auch gar kein margin oder padding hat.

... diese Codierung habe ich aus der Vorlage.

dann ist die Vorlage unsinnig. einem inline-Element wie a kann man weder Breite noch Höhe zuweisen (nunja, der IE siehr das im quirks mode anders) und list-style hat a natürlich auch nicht - wenn Du dennoch list-style-type: none angibst, ist das etwa so, als wenn Du an einer Benzin-Zapfsäule dranschreibst "zum Verzehr nicht geeignet".

Gruß
Ingo

[andre.roesti]

AW: Spagetti-Code in CSS entfernen

Hallo,

Du könntest auch eine E-Mail an die Qualidator leute senden, hab' ich bei unklarheiten auch schon gemacht, die Antworten jeweils schon. Ich hab' (als regelmässiger Qualidator nutzer) herausgefunden, das der Qualidator in diesem Punkt sehr streng ist. Ich finde das etwas speziell doch es ist so: Es darf in HTML keine einzige Style Angabe(sprich kein "style"-Attribut) mit CSS definitionen vorkommen, es muss ales per ID's oder Classes definiert werden, das diese Information über den Spaghetti Code verschwindet. Bei mir war's so, ich hab' jetzt keine einzige "style" angabe mehr in HTML.

MfG
[ASTERIX]