Vorteilhafte CSS-Formatierung

[Consti]

Zur Zeit aktualisier ich das Design einiger HPs. Dabei geht ja kein Weg mehr um CSS herum.

Mein Problem ist jetzt eine gute, einheitliche, übersichtliche und sinnvolle Formatierung.
Würde gerne wissen, wie ihr das macht? Gibt es irgendwelche Regeln, an die man sich halten sollte / muss?

Hab mal ein paar Möglichkeiten gepostet. So sehen meine CSS Dateien aus. Teils sind sie nur so geschrieben. Einige enthalten auch verschiedene Teile.

a:link { color:#123455; text-decoration:non }
h1 { font-weight:bold; }

Vorteil Hier:
Man hat für jeden Befehl eine einzige Zeile und es ist ansich sehr übersichtlich. Meiner Meinung nach bietet sich solch eine Formatierung an, wenn man zu einem Element nur wenige Eigenschaften angeben möchte.
Falls man sehr viele Eigenschaften zuordnen möchte, wirds in einer lagen Zeile sehr unübersichtlich - deshalb würde ich für viele Eigenschaften folgende Version bevorzugen:

p.navigation
    {
    color:#123456;
    font-weight:bold;
    text-decoration:none;
    padding-left:5px;
    padding-right:10px
    }

Für einen Befehl ist das recht übersichtlich. Falls man jedoch eine lange CSS Datei hat, finde ich es so eher chaotisch.
Naja, dazu gibt es dann ja noch ein paar Abwandlungen

p.navi    {
    ....
    }

ODER

p.navi    {
    .... }

USW.

Welche Version bevorzugt ihr, und wie setzt ihr die Tab-Stops ein? Sind bei euch alle Klammern auf einer "Ebene" und alle Befehle auch?

Hoffe, dass mir jemand ein paar Tipps geben kann, wie ich meine CSS-Dateien ein wenig übersichtlicher gestalten kann!

Dankeschön schon einmal.

P.S.: Hab noch im Forum geuscht, jedoch leider noch gar nix zu dem Thema gefunden

 

[Budman]

Gute Frage! Das beschäftigt mich auch jedesmal wenn die Datei länger und länger wird.

Ich hab früher immer alles nebeneinander in einer zeile geschrieben, ist aber nicht sinnvoll.

Mittlerweilen bin ich aber zu der Schreibweise wie in 2 übergegangen, denn mit scrollrad gehts halt nunmal nur auf und ab...

Und wichtig: Kommentarzeilen und Einteilung danach. Ich mache zuerst meine allgemeinen Sachen, dann Klassen usw.

Gruss

 

[Consti]

mmh, naja, eine richtige Antwort ists ja noch nicht. Aber kommt ja vllt noch.

Um noch mal eben auf die Ordnung der Elemte zurückzukommen.
Da kann man ja auch noch viel selber bestimmen.

Es geht z.B. so

body { ... }
body.index { ... }

img { ... }
img.album { ... }

...

.header { .. }
.position { .. }

1. Man kann das ganze ja nach dem Alphabeth ordnen.
2. Man kann erst allgemeine Einstellungen machen, dann spezifische (wie beim img und img.album
3. Man kann auch erst allgemeine Machen, dann spezifische [ body img ] und nun [body.index img.album]
4. Und wo setzt man die Elemte hin, die zu keiner Gruppe gehört (wie z.B. .position ODER .header)
5. usw.

Naja, vllt kann ja einer die "zündende" Idee präsentieren!