Individualformate definieren

[misterunknown]

Moin,

ich versuche gerade mein Stylesheet zu optimieren und möchte gerne mit Individualformaten arbeiten. Ich habe auf meiner Seite (http://misterunknown.de) verschiedene "Klassen", beispielsweise .headline, .textbox und so weiter. Ich will nun für verschiedene Seiten (News, Blog, Download) Individualformate definieren, sodass im Quelltext für den "Content"-Div, also der Bereich in der Mitte, beispielsweise folgendes stehen könnte:

  
<span class=headline>  
<div id=news>  
.... Newseinträge mit Tabellen, Links etc...  
</div>  

auf einer anderen Seite könnte das so aussehen:

  
<span class=headline>  
<div id=gaestebuch>  
.... Gästebucheinträge mit Tabellen, Links etc...  
</div>  

Wenn ich also beispielsweise das Individualformat #news definiere sieht das so aus:

  
#news  
{  
	padding-left:15px;  
	padding-top:...;  
	...  
}  
#news table  
{  
	border:0;  
	...  
}  
#news a  
{  
...  
}  
...  

Gibt es eine Möglichkeit alles zusammenzufassen, so dass es etwas übersichtlicher aussieht? Also in dem Stile:

  
#news [ table {...}, a{...}, ... ]  

Im Internet steht über die Syntax von CSS nichts derartiges (jedenfalls finde ich es nicht) und ich habe auch noch nie so ein Stylesheet irgendwo gesehen, es war nur so eine Idee von mir.
Ich hoffe die Frage klingt nicht zu dumm...

Grüße Marco

[MudGuard]

Hi,

<span class=headline>
<div id=news>

Daß das kein gültiges HTML sein kann, ist Dir klar?
span als inline-Element kann kein div enthalten, da div ein block-Element ist.

Und <span class="headline"> klingt eher nach <h1> ...

Gibt es eine Möglichkeit alles zusammenzufassen, so dass es etwas übersichtlicher aussieht? Also in dem Stile:

#news [ table {...}, a{...}, ... ]

  
Nein, diese Art zusammenzufassen gibt es in CSS nicht.  
  
Die einzige Art der "Zusammenfassung" ist, daß für ein Ruleset mehrere Selektoren kommagetrennt angegeben werden können:  
  
`#news table, #gaestebuch div { background-color: green; } `{:.language-css}  
  
Für Deinen Fall:  
  
schreib halt alle Rulesets, deren Selektoren mit #news beginnen, hintereinander ins Stylesheet, dann erst alle mit #gaestebuch, danach dann die mit #kontaktformular usw.  
Wenn das noch nicht ausreicht, kannst Du ja noch Kommentare zwischen die Blöcke setzen ...  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[misterunknown]

Moin,

Daß das kein gültiges HTML sein kann, ist Dir klar?
span als inline-Element kann kein div enthalten, da div ein block-Element ist.

Ja, das ist klar, ich habe vergessen, das Tag wieder zu schließen, auf der Homepage ist es natürlich anders.

Und <span class="headline"> klingt eher nach <h1> ...

Das stimmt. Die Seite ist als "Kinderprojekt" entstanden, da ich wenig Ahnung von irgendwas hatte, aber nachdem ich jetzt das HTML und CSS valide gemacht habe, soll jetzt auch die "Ideologie", wenn ich das mal so nennen darf, einbezogen werden.

Für Deinen Fall:

schreib halt alle Rulesets, deren Selektoren mit #news beginnen, hintereinander ins Stylesheet, dann erst alle mit #gaestebuch, danach dann die mit #kontaktformular usw.
Wenn das noch nicht ausreicht, kannst Du ja noch Kommentare zwischen die Blöcke setzen ...

Ja, danke, ich denke so werde ich es machen. Das scheint die beste Lösung zu sein.

Grüße Marco

[Cheatah]

Hi,

[...] nachdem ich jetzt das HTML und CSS valide gemacht habe, soll jetzt auch die "Ideologie", wenn ich das mal so nennen darf, einbezogen werden.

nenn es lieber "Semantik", dann kannst Du auch die damit entstehenden Vorteile bei entsprechender Suche finden.

Cheatah

[Felix Riesterer]

Lieber misterunknown,

Gibt es eine Möglichkeit alles zusammenzufassen, so dass es etwas übersichtlicher aussieht? Also in dem Stile:
#news [ table {...}, a{...}, ... ]

nein, eine solche Schreibweise gibt es nicht.

Im Internet steht über die Syntax von CSS nichts derartiges (jedenfalls finde ich es nicht) und ich habe auch noch nie so ein Stylesheet irgendwo gesehen

Das ist eine Folge dieser Ursache.

es war nur so eine Idee von mir.
Ich hoffe die Frage klingt nicht zu dumm...

Ich finde die Frage überhaupt nicht dumm. Man könnte sich überlegen, ob man das Sytelsheet in verschiedene Dateien aufteilt, um diese dann entsprechend über @import einzubinden. In etwa so:

/* News-Bereich */  
@import url(./news.css);  
  
/* Impressum */  
@import url(./impressum.css);

Ob diese "Fragmentierung" allerdings mehr Übersicht bringt, vermag ich für Dein Projekt nicht zu beurteilen.

Liebe Grüße,

Felix Riesterer.

[MudGuard]

Hi,

Ich finde die Frage überhaupt nicht dumm. Man könnte sich überlegen, ob man das Sytelsheet in verschiedene Dateien aufteilt, um diese dann entsprechend über @import einzubinden. In etwa so:

Das hat aber pro Import einen zusätzlichen http-Roundtrip zur Folge ...

Wenn überhaupt, dann lokal aufteilen und vor dem Hochschieben auf den Server zusammenbauen.

cu,
Andreas

[misterunknown]

Moin,

Ich finde die Frage überhaupt nicht dumm. Man könnte sich überlegen, ob man das Sytelsheet in verschiedene Dateien aufteilt, um diese dann entsprechend über @import einzubinden.
Ob diese "Fragmentierung" allerdings mehr Übersicht bringt, vermag ich für Dein Projekt nicht zu beurteilen.

Also die Möglichkeit hab ich mir mal angeguckt, sie ist für meinen Fall aber eher kontraproduktiv. Trotzdem danke.

Grüße Marco

[Alexander (HH)]

Moin Moin!

Gibt es eine Möglichkeit alles zusammenzufassen, so dass es etwas übersichtlicher aussieht? Also in dem Stile:

#news [ table {...}, a{...}, ... ]

  
Du könntest das über Templates bzw. über einen Preprozessor erschlagen, der Deine Kurzform in gültiges CSS "aufbläst".  
  
Wenn Du sehr strenge Regeln für die Eingabedatei ansetzt, ist so ein Preprozessor mit relativ wenig Aufwand in gängigen Scriptsprachen zu bauen, dafür versteht der Preprozessor dann aber nahezu nichts von CSS.  
  
Ich meine, irgendwo rund um Ruby on Rails gibt es etwas derartiges schon, dass eine recht kompakte Sprache in "normales" CSS aufbläst. Ich komme nur gerade nicht auf den Namen.  
  
  
Alexander

-- 
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".

[Gunnar Bittersmann]

@@Alexander (HH):

nuqneH

Ich meine, irgendwo rund um Ruby on Rails gibt es etwas derartiges schon, dass eine recht kompakte Sprache in "normales" CSS aufbläst. Ich komme nur gerade nicht auf den Namen.

SASS?

Qapla'