id, class , Struktur, Stil

[berdn]

Hallo liebes Forum,

ich habe mal wieder ein paar Verständnis bzw. Stilfragen zu CSS.

a.) Also, nach möglichkeit kein "inline" CSS, logisch
b.) Am besten eine zentrale CSS-Datei, logisch
c.) Auch wenn auf einer Seite CSS verwendet wird was nur auf dieser Seite vorkommt ?

d.) Bereich (kann) fasse ich in DIV's zusammen z.B. Header, linke Spalte, Content Spalte, Footer

e.) Allgemeine Angaben fasse ich zusammen
z.B. p, th, td, a {font-family: Arial, etc.}
f.) Elemente die einmal auf der Seite Vorkommen weise ich eine "id" zu und formatiere über #Name
g.) Formatierungen die ich öfters brauche organisiere ich über klassen, wobei ich eine Element z.B. zwei Klassen zuweise z.B. eine für Farbe und eine für Abstände (Wenn es Sinn macht)

Jetzt wird es kniffliger
h.) Ich habe p's die z.B. nur im div "navigation" eingerückt sind, ich würde schreiben
#navigation p{margin-left:20px} oder empfiehlt sich eher hier
#navigation .rueckEin{margin-left:20px}
und dem p eine Klasse zu zuweisen. Sauberer im HTML sieht die erste Lösung aus

j.) Ich habe eine Linkliste jeder Link hat eine anders Icon (Image) vorneweg,
gebe ich jetzt jedem li eher eine ID oder eine Klasse ?

k.) Vererbung:

• p ,a, td{} = jedes p, jedes a, jedes td, logisch

• p.class{} = Diese klasse gilt nur bei einen p, logisch

• #navigation p{} = Nur p's innerhalb von der id 'navigation', logisch
  Dann sieht's bei mir zum Teil so aus
  #navigation p, #navigation a, #navigation td{} für mehere Elemente

• #navigation p img{} = Nur img in einem p das in 'navigation' ist, logisch ? oder besser p#navigation img{} ?

• Wie funktioniert denn so etwas .Klasse p{} bzw. .Klasse1 .Klasse2{}, hatte ich gestern nicht hingekriegt.

l.) Vererbung aufheben ?
Ich hatte einen p{background-color:#FF0000} zu gewiesen, und einer Klasse .andereFarbe{background-color:#FFFF00} im HTML stand dann p class="andereFarbe"
hier wurde die Hintergrundfarbe nicht komplett aud die andere Farbe gesetzt, oben und unten blieben "Steifen" in #FF0000 zurück. padding und margin standen in beiden fällen auf 0px;

m.) Testen und organisieren
Ich teste meine Seiten zuerst in Mozilla und passe dann über conitional comments meine Seiten den IE an. (lade damit eine exterenes css für den IE 6 und ein für den IE 5.5)

n.) Für min-width arbeite ich dann in diesen externen CSS mit expression()

Also ich beschäftige mich jetzt schon seit geraumer Zeit mit CSS, gewinne aber immer mehr den Eindruck das es kein leichtes Thema ist das man auf die schnelle beherscht.
Einmal die Theorie und dann das Verhalten in der Praxis ...

Naja, Hauptthema meiner langen Anfrage ist es einen für mich sauberen Stil zu finden.
Wenn mir da der eine oder andere dabei helfen könnte wäre ich sehr dankbar.

Meine nächste Aufgabe ist es unsere Gestalter von der Einheit "px" wegzubringen ;-)

Euch allen einen schönen Tag,

Bernd

[MudGuard]

Hi,

a.) Also, nach möglichkeit kein "inline" CSS, logisch

Ja.

b.) Am besten eine zentrale CSS-Datei, logisch

Ja.

c.) Auch wenn auf einer Seite CSS verwendet wird was nur auf dieser Seite vorkommt ?

Ja. Auf die Art hast Du alles CSS an einem Fleck.

d.) Bereich (kann) fasse ich in DIV's zusammen z.B. Header, linke Spalte, Content Spalte, Footer

div, wenn es kein besser passendes Element gibt.

e.) Allgemeine Angaben fasse ich zusammen
z.B. p, th, td, a {font-family: Arial, etc.}

Sinnvoll.

f.) Elemente die einmal auf der Seite Vorkommen weise ich eine "id" zu und formatiere über #Name

Wenn das Element nur einmal vorkommt, braucht es keine id, sondern kann direkt über den Elementnamen angesprochen werden. Warum sollte man z.B. body erst eine id zuweisen, wenn body bereits ein ausreichender Selektor ist?

Oder meinst Du Formatierungen, die nur eines von vielen gleichen Elementen betreffen (also z.B. ein p von vielen p)?
Dann ja, id vergeben. Es sei denn, dieselbe Formatierung soll auf verschiedene Elemente angewendet werden (Du hast ein p von vielen und ein h2 von mehreren, die beide "wichtig" sind und daher rot sein sollen, dann würde ich eine Klasse "wichtig { color:red; }" benutzen.

g.) Formatierungen die ich öfters brauche organisiere ich über klassen, wobei ich eine Element z.B. zwei Klassen zuweise z.B. eine für Farbe und eine für Abstände (Wenn es Sinn macht)

Hm. Sicher lassen sich in manchen Fällen mehrfache Klassen in einem Element nicht vermeiden, aber mir reicht oft eine Klasse - der Rest wird über andere Selektoren (meist Nachfahren-Selektoren - befindet sich das Element in der Navigation, im Inhalt, im Fuß ...)

h.) Ich habe p's die z.B. nur im div "navigation" eingerückt sind, ich würde schreiben
#navigation p{margin-left:20px} oder empfiehlt sich eher hier
#navigation .rueckEin{margin-left:20px}
und dem p eine Klasse zu zuweisen. Sauberer im HTML sieht die erste Lösung aus

Warum eine Klasse benutzen, wenn diese nicht notwendig ist?

j.) Ich habe eine Linkliste jeder Link hat eine anders Icon (Image) vorneweg,
gebe ich jetzt jedem li eher eine ID oder eine Klasse ?

s.o. - wenn das Bild wirklich nur einmalig verwendet wird, dann id, sonst Klasse.

k.) Vererbung:

• p ,a, td{} = jedes p, jedes a, jedes td, logisch
• p.class{} = Diese klasse gilt nur bei einen p, logisch
• #navigation p{} = Nur p's innerhalb von der id 'navigation', logisch
  Dann sieht's bei mir zum Teil so aus
  #navigation p, #navigation a, #navigation td{} für mehere Elemente
• #navigation p img{} = Nur img in einem p das in 'navigation' ist, logisch ? oder besser p#navigation img{} ?

Richtig.

• Wie funktioniert denn so etwas .Klasse p{} bzw. .Klasse1 .Klasse2{}, hatte ich gestern nicht hingekriegt.

Genauso. p in einem Element mit der Klasse Klasse bzw. Element mit Klasse Klasse2 in Element mit Klasse Klasse2

l.) Vererbung aufheben ?
Ich hatte einen p{background-color:#FF0000} zu gewiesen, und einer Klasse .andereFarbe{background-color:#FFFF00} im HTML stand dann p class="andereFarbe"
hier wurde die Hintergrundfarbe nicht komplett aud die andere Farbe gesetzt, oben und unten blieben "Steifen" in #FF0000 zurück. padding und margin standen in beiden fällen auf 0px;

Schwer nachzuvollziehen. Online-Beispiel?

m.) Testen und organisieren
Ich teste meine Seiten zuerst in Mozilla und passe dann über conitional comments meine Seiten den IE an. (lade damit eine exterenes css für den IE 6 und ein für den IE 5.5)

Kann man so machen.

n.) Für min-width arbeite ich dann in diesen externen CSS mit expression()

Geht in dem Uralt-Browser ja leider nicht anders.

Also ich beschäftige mich jetzt schon seit geraumer Zeit mit CSS, gewinne aber immer mehr den Eindruck das es kein leichtes Thema ist das man auf die schnelle beherscht.

Richtig.

cu,
Andreas

[berdn]

Tausend Dank Andreas,

ich scheine ja langsam auf den richtigen Weg zu sein ;-)

d.) Bereich (kann) fasse ich in DIV's zusammen z.B. Header, linke Spalte, Content Spalte, Footer

div, wenn es kein besser passendes Element gibt.

Diese "Div" habe ich immer noch nicht verstande ;-(
Ich dachte das kommt von "division" Sparte, Abteilung bzw, Gruppe.

Ich habe einen Header der enthält p's, ul's und table' (kann vorkommen) das packe ich dann alles in einen div und habe so eine gewisse Ordnung, bzw. das div hat eine ID und ich kann dann die
Kindelemente p und ul für diesen Header ohne Klassen formatieren.

So wie Du es beschreibst ist es eher wie span für inline-Elemente eine art wildcart ?!

Den Rest habe ich verstanden und ich versuche später mal ein einfaches Beispiel nach zu liefern.

Dankend,

Bernd

[ShiNtoKu]

Hallo,

Diese "Div" habe ich immer noch nicht verstande ;-(
Ich dachte das kommt von "division" Sparte, Abteilung bzw, Gruppe.

Das tut es auch.

Ich habe einen Header der enthält p's, ul's und table' (kann vorkommen) das packe ich dann alles in einen div und habe so eine gewisse Ordnung, bzw. das div hat eine ID und ich kann dann die Kindelemente p und ul für diesen Header ohne Klassen formatieren.

Das ist auch durchaus sinnvoll. Da ein div keine semantische Beduetung hat setze ich es eigentlich nur ein, um größere Abschnitte zu gruppieren, z.B. um alle Listen, etc in einen Menücontainer zu packen und ihn komplett zu floaten, etc.

Viele Grüße
Patrick

[Ingo Turski]

Hi,

b.) Am besten eine zentrale CSS-Datei, logisch
c.) Auch wenn auf einer Seite CSS verwendet wird was nur auf dieser Seite vorkommt ?

Das würde ich vom Einzelfall abhängig machen. Ich finde es wenig sinnvoll, umfangreiche Definitionen, die wirklich nur auf einer einzigen Seite vorkommen, auszulagern und somit auch dann laden zu lassen, wenn es gar nicht nötig ist, weil die betreffende Seite ohnehin selten aufgerufen wird.

g.) Formatierungen die ich öfters brauche organisiere ich über klassen, wobei ich eine Element z.B. zwei Klassen zuweise z.B. eine für Farbe und eine für Abstände (Wenn es Sinn macht)

Wenn - was selten der Fall sein dürfte. Meist verwendet man ja logische Klassen, also nicht für Farbe und Abstand, sondern für eine bestimmte Art von Inhalten.

j.) Ich habe eine Linkliste jeder Link hat eine anders Icon (Image) vorneweg,
gebe ich jetzt jedem li eher eine ID oder eine Klasse ?

Tja, in modernen Browsern kämst Du ohne diese Selektoren aus. Aber dem IE zuliebe würde ich IDs (da einmalig) verwenden.

• #navigation p img{} = Nur img in einem p das in 'navigation' ist, logisch ? oder besser p#navigation img{} ?

Das sind zwei ganz verschiedene Dinge.

passe dann über conitional comments meine Seiten den IE an. (lade damit eine exterenes css für den IE 6 und ein für den IE 5.5)

ich versuche immer mit einem CSS für alle IEs auszukommen.

n.) Für min-width arbeite ich dann in diesen externen CSS mit expression()

ungünstig. Teste zumindest, wie das dann ohne Javascript aussieht.

freundliche Grüße
Ingo