Wie strukturiert ihr euren CSS-Code ?

k-design · #1 (**permalink**) 07.09.2007, 14:04

Ich wollte mal eine kleine Diskussion starten, wie ihr euren CSS Code strukturiert.

als Beispiel:

Code:

a { background: #ff0000; font-size: 12px; color: #000; padding: 2px; border: 1px solid #00ff00}

ODER:

Code:

a { 
   background: #ff0000; 
   font-size: 12px;
   color: #000; 
   padding: 2px; 
   border: 1px solid #00ff00 }

Desweiteren wollte ich auch gerne wissen, ob ihr lieber eine CSS Datei nehmt oder eure CSS-Dateien in verschiedene Bereiche aufteilt (Page, headings, navigation, etc..)

Grund ist einfach, dass jemand zu mir meinte, dass wenn man CSS so untereinander schreibt wie im 2. Beispiel, dass es besser lesbar wäre.
Ich finde aber bei einer großen Menge von Klassen, ist diese Schreibweise einfach nur zu viel zum Scrollen.
Ich stelle mir jetzt noch vor das ich noch ein a:hover, a:active etc. hinzufüge und diese Werte mal ändern muss, dann habe ich bei der einzeiligen Schreibweise gleich den nächsten Wert auf der nächsten Zeile.

Naja was sagt ihr denn dazu ?

Mir ist es auch lieber, wenn ich nur eine CSS habe (für media="screen") anstatt mehrere, weil ich lieber alles in einem habe, als so getrennt und einen Haufen Dateien öffnen müsste, wenn ich mal Änderungen machen müsste.

Ja wie ist da denn eure Meinung ?

Bin gespannt.

inta · #2 (**permalink**) 07.09.2007, 14:10

Bei mir schauts so aus, das finde ich einfach am übersichtlichsten:

Code:

a,
p {
    font-size: 1em;
    color: #000000;
    background: #ff0000;
    padding: 0.2em;
    border: 1px solid #00ff00;
}

Im Normalfall ist alles in einer CSS-Datei und die verschiedenen Bereiche werden durch Kommentare getrennt.

Geronimo · #3 (**permalink**) 07.09.2007, 14:11

Kannst ja mal einen Blick riskieren.

k-design · #4 (**permalink**) 07.09.2007, 14:43

@inta

mh ich finde das nicht übersichtlicher

Gut die Eigenschaften und Werte sind sicherlich übersichtlicher, aber ich meine mehr die Selektoren. Denn die sucht man doch zuerst, bevor man die Werten/Eigenschaften ändert.

Also macht es die Mehrheit wohl mehrzeilig je Selektor hm.

@designfanatiker

Code:

#seitenkopf
{
  background: url(/bg-seitenkopf.jpg) repeat-x #24365e;
  border-bottom: 1px solid #000;
  color: #cdd2d5;
  float: left;
  padding: 1.2em 0;
  position: relative;
  width: 60em
}

#seitenkopf img
{
  float: left;
  margin: 0 1.2em
}

#seitenkopf h1
{
  font: 2.8em/1 georgia, serif;
  padding: 1.12em 0 0 5.7em
}

#sprungziele {
  left: -200em;
  position: absolute;
  top: 0;
}

#sprungziele ul 
{
  margin: 11em 2em 0 14.8em;
}

#sprungziele a:active,
#sprungziele a:focus
{
  color: #cdd2d5;
  left: 200em;
  position: absolute;
  text-decoration: underline;
  top: 0;
  width: 43.2em
}

Diese Code finde ich unübersichtlich

also nicht das er schlecht ist in meinen augen. Er ist nur für mich komisch strukturiert. Weil ich so schlechter was finden würde...

bei mir würde der so aussehen

Code:

#seitenkopf {  background: url(/bg-seitenkopf.jpg) repeat-x #24365e;  border-bottom: 1px solid #000;  color: #cdd2d5;  float: left;  padding: 1.2em 0;  position: relative;  width: 60em }
#seitenkopf img {  float: left;  margin: 0 1.2em }
#seitenkopf h1{  font: 2.8em/1 georgia, serif;  padding: 1.12em 0 0 5.7em }

#sprungziele {  left: -200em;  position: absolute;  top: 0; }
#sprungziele ul {  margin: 11em 2em 0 14.8em; }
#sprungziele a:active, #sprungziele a:focus {  color: #cdd2d5;  left: 200em;  position: absolute;  text-decoration: underline;  top: 0;  width: 43.2em }

so sehe ich doch viel eher den Selektor mit seinen Unterelementen oder nicht ?

PS: ich will hier auch niemanden kritisieren, jeder soll mit seiner Weise damit klar kommen. Ich versuche nur gerade zu verstehen, wieso es alle Welt mehrzeilig macht

Maxefix · #5 (**permalink**) 07.09.2007, 15:01

Ich schreib die Eigenschaften auch untereinander. Das finde ich deutlich übersichtlicher. Ab einer bestimmten Größe suche ich dir Selektoren eh über die Suchfunktion raus. Ist effektiver als ewiges rumgescrolle bis man da ist wo man hinwill...

Generell ist es besser nur eine CSS-Datei zu haben, da der Client dann nicht mehrere Dateien anfordern muss. Screen und Print-Bereiche kann man ja auch in einer Datei trennen (über @media screen { } glaub ich).

Gruß

Max

#6 (**permalink**) 07.09.2007, 15:05

Ich mache es so:

Code:

/* Layout */

#containername
     {background-color:#555555;
      width:1000px;
      color:#666234

#containername2
     {background-color:#467543;
      width:20px;
      color:#970659}

/* Textformatierung */

p
     {padding:5px;}

k-design · #7 (**permalink**) 07.09.2007, 15:23

Zitat:

Zitat von Maxefix

Ich schreib die Eigenschaften auch untereinander. Das finde ich deutlich übersichtlicher. Ab einer bestimmten Größe suche ich dir Selektoren eh über die Suchfunktion raus. Ist effektiver als ewiges rumgescrolle bis man da ist wo man hinwill...

Generell ist es besser nur eine CSS-Datei zu haben, da der Client dann nicht mehrere Dateien anfordern muss. Screen und Print-Bereiche kann man ja auch in einer Datei trennen (über @media screen { } glaub ich).

Gruß

Max

naja es geht mir aber bei dem Beispiel drüber, eher darum, dass man in einem Selektor die ganzen Unterelemente viel schneller übersieht...

z.B.
der #seitenkopf Selektor, da sehe ich sofort, aha, ich habe ein img und h1 noch zusätzlich gestyled. Angenommen es funktioniert irgendwas nicht, weil irgendwas falsch gestyled wurde, z.B. ein Link in einem Div hat einen komischen Abstand (egal war) Da würde man ja nicht unbedingt gleich auf die Idee kommen, dass er der Link ist, man könnte ja auch denken, dass es der Eltern-Div ist. Ich würde bei mir sofort sehen, aha eine zeile drunter habe ich ja ein a selektor für diesen Div gestyled. Bei der mehrzeiligen Variante, würde ich erst mehrere Zeilen runterschauen müssen um das zu sehen. Das klingt vielleicht etwas albern, aber es ging mir letztens so, weil ein Programmierer meine CSS umgebaut hat und plötzlich diese mehrzeilige Schreibweise verwendet hat, da habe ich min. doppelt so lange gebraucht den Fehler zu korrigieren, weil er durch eine Vererbung überschrieben hatte, habe ich das nicht sofort gesehen, da der andere Codeschnippsel weiter unten war... und einer Zeile wäre ich schnell die Liste der unterselektoren durchgegangen und hätte das sofort gesehen.
Ich hoffe das versteht jemand ? *g

Und bitte sagt mal nicht immer, "Ich finde das übersichtlicher", sondern sagt mal warum ihr das so empfindet.

Geronimo · #8 (**permalink**) 07.09.2007, 15:49

Während es technisch unbedarfte Webautoren oft vorziehen sämtliche Eigenschaften hintereinander zu notieren, verwenden Programmierer die gewohnte Einrückung meist auch für Hypertextdokumente und Stylesheets. Alles eine Sache der Gewohnheit.

#9 (**permalink**) 07.09.2007, 15:54

Ich bin so oder so ein Mensch der Ordnung.
Auch mein Zimmer ist aufgeräumt.

Manchmal kommt man durcheinander, wenn man eine Liste formatieren will, die eigentlich nur in einem Container vorkommt (z.B. Navigation). Diese könnte man dann unter den Punkt "Listen" ordnen, also bei den anderen Listen oder eben direkt unter den Container "Navigation". Das ist immer meine Zwickmühle.

Einrückungen halte ich aber für sehr sinnvoll, allein schon um sofort sehen zu können, ob ein Container zuviel ist oder sowas.

inta · #10 (**permalink**) 07.09.2007, 16:15

Ich weiß nicht genau wieso ich "meine" Schreibweise übersichtlicher finde, ich versuche mal ein paar Anhaltspunkte zu finden:

ich muss nicht horizontal scrollen
die Attribute fangen alle an der gleichen Position an (nach einem Tab oder 4 Leerzeichen)
mein Editor hebt mir Klassen und IDs farblich ab, daher sind sie sowieso gut zu erkennen
obwohl ich meine Fenster nie maximiere, sehe ich bei meiner schreibweise ca. 6 Definitionsblöcke untereinander
(man sieht die nachfolgenden also trotzdem meist auf einen Blick)
mehrere durch Kommata getrennte Selektoren sind hintereinander in einer Zeile viel schwerer zu erkennen als jeweils in einer neuen Zeile

Wie schon erwähnt bin ich diese Art der Blockbildung auch vom Programmieren gewohnt und in der Regel suche ich Probleme mit dem Firebug raus und suche im Stylesheet nur noch gezielt nach der Klasse/ID die ich haben möchte.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Euren Rat zum Thema CSS und meiner Homepage!!!	marcrix	CSS	1	12.07.2009 18:19
erster CSS Code	Chaosgoettin	CSS	6	25.11.2007 13:12
CSS Menuproblem im IE (Superfish)	ven	CSS	1	04.10.2007 13:13
XHTML und CSS Code auszeichnen	Lloyd Larkin	Barrierefreiheit	11	20.07.2006 08:51
XHTML und CSS Projekt: Layout und Code check	Lloyd Larkin	Site- und Layoutcheck	5	19.03.2006 15:20