nicht angemeldet
CSS-Angaben komplett in eine externe *.css?
0 0 Die Vorteile von CSS nutzen
0 0
CSS-Angaben komplett in eine externe *.css?
Hallo.
Macht es Sinn, alle CSS-Angaben aus einer HTML-Datei komplett in eine externe *.css zu packen?
Konketer: Das Layout der betreffenden Seite ist mit einer Tabele formatiert, deren Zellen die CSS-Angaben enthalten. DIVs, Ps, etc. sind auch noch mit CSS formatiert.
Nun mein Gedankengang: Die externe *.css existiert sowieso schon für einige Objekte, wird also immer geladen am Anfang. Wenn ich nun alle CSS-Angaben aus der HTML-Datei mit vielen verschiedenen Klassen in die *.css packe, wird die HTML-Datei übersichtlicher und kleiner.
Aber die CSS-Datei wird größer und ich muss ja auch für jedes Objekt eine eigene Klasse anlegen, so die Eigenschaften der Objekte nicht immer gleich sind. Dadurch wird ja die CSS-Datei ziemlich groß.
Was ist nun vorteilhafter? Alles auslagern und eine große *.css bekommen und dafür einen übersichtlichen Qulltext oder die CSS-Angaben in der HTML-Datei stehen zu lassen?
Danke schonmal für Eure Antwort(en),
Kristian
-
Hallo,
Was ist nun vorteilhafter? Alles auslagern und eine große *.css bekommen und dafür einen übersichtlichen Qulltext oder die CSS-Angaben in der HTML-Datei stehen zu lassen?
Natürlich alles auslagern. Wiege doch mal die Vor und Nachteile ab und du wirst sehen was dabei herauskommt.
Grüße
Jeena Paradies-
Hi Jeena,
Natürlich alles auslagern. Wiege doch mal die Vor und Nachteile ab und du wirst sehen was dabei herauskommt.
Hab' ich ja schon versucht:
+kleine *.html
+übersichtliche *.html
-riesige *.cssHab' ich was vergessen?
Grüße,
Kristian-
Hallo,
Hab' ich ja schon versucht:
+kleine *.html
+übersichtliche *.html
-riesige *.cssna also zwei mal + ist doch mehr als ein mal - vor allem weil die CSS Datei trotzdem durch Kommentare übersichtlich bleibt und nur ein mal geladen werden muss.
Grüße
Jeena Paradies-
+kleine *.html
+übersichtliche *.html
-riesige *.css
na also zwei mal + ist doch mehr als ein mal - vor allem weil die CSS Datei trotzdem durch Kommentare übersichtlich bleibt und nur ein mal geladen werden muss.Wobei das - eigentlich das erste + aufhebt. Die *.css wird ja im Verhältnis größer als die *.html war.
Beispiel:
td style="margin:0px; border:0px;"< und >td style="margin:0px;"<
werden zu
td class="td1"< und >td class="td2"<
sowie
.td1 {margin:0px; border:0px;} und .td2 {margin:0px;}Das sind mehr Zeichen, also auch mehr Dateigröße.
-
Nanu? Wo sind denn die eckigen Klammern?
-
Hallo,
Klar aber da bleibt noch das eine + übrig und da haben wir es schon. Außerdem ist da noch die Tatsache dass die das gleiche CSS für alle Dateien verwendet werden darf. Also wenn du 10 gleiche Seiten hast wird es nur einmal heruntergeladen aber 10 mal angezeigt.
Grüße
Jeena Paradies-
Klar aber da bleibt noch das eine + übrig und da haben wir es schon.
Und es kommt ein - dazu. Nämlich, dass die *.css größer wird als vorher, die Verkleinerung der *.html aber nicht so groß ist wie die *.css-Vergrößerung. :o)
Außerdem ist da noch die Tatsache dass die das gleiche CSS für alle Dateien verwendet werden darf. Also wenn du 10 gleiche Seiten hast wird es nur einmal heruntergeladen aber 10 mal angezeigt.
Also wieder ein +. Ok, ich bin überzeugt.
Kristian
-
Hallo,
Also wieder ein +. Ok, ich bin überzeugt.
Juhu wieder einen bekehrt ;-)
Und denk nur wenn du so wie ich bei manchen Seiten über 200 HTML Seiten hast da läppert sich schon was zusammen :-).
Grüße
Jeena Paradies-
Juhu wieder einen bekehrt ;-)
*g*
Und denk nur wenn du so wie ich bei manchen Seiten über 200 HTML Seiten hast da läppert sich schon was zusammen :-).
Stimmt. Würde sich aber - davon abgesehen - bei solchen Projekten nicht eher ein CMS eignen, als die 200 Seiten von Hand zu erstellen?
Grüße!
Kristian-
Hallo,
Und denk nur wenn du so wie ich bei manchen Seiten über 200 HTML Seiten hast da läppert sich schon was zusammen :-).
Stimmt. Würde sich aber - davon abgesehen - bei solchen Projekten nicht eher ein CMS eignen, als die 200 Seiten von Hand zu erstellen?Ach ich weiß nicht so richtig. Warscheinlich schon. Aber andererseits glaube ich dass das so auch ganz gut geht wenn es einigermaßen durchdacht ist und sich in den nächsten paar Jahre sowieso nicht ändern wird.
Grüße
Jeena Paradies-
Hallo,
Das wichtigste habe ich natürlich wieder vergessen. Natürlich liefert ein CMS genau so nur HTML Dateien an den Browser also hat das ausgelagerte CSS immer noch den gleichen Vorteil.
Grüße
Jeena Paradies-
Natürlich liefert ein CMS genau so nur HTML Dateien an den Browser also hat das ausgelagerte CSS immer noch den gleichen Vorteil.
Jepp, is klar. :-)
Kristian
-
-
Ach ich weiß nicht so richtig. Warscheinlich schon. Aber andererseits glaube ich dass das so auch ganz gut geht wenn es einigermaßen durchdacht ist und sich in den nächsten paar Jahre sowieso nicht ändern wird.
Wenn es sich nicht ändert, ja. Aber wenn du ein CMS hast, was gut, leicht und schnell anpassbar ist, könntest du dir vielleicht 50% der Arbeit sparen.
Kristian, abschweifend
-
-
Hallo.
Würde sich aber - davon abgesehen - bei solchen Projekten nicht eher ein CMS eignen, als die 200 Seiten von Hand zu erstellen?
"CMS" steht bekanntermaßen für "_Content_ Management System", hat also zunächst nichts mit dem Aussehen einer Präsentation zu tun, so dass sich der Einsatz (mindestens) einer CSS-Datei auch bei einem CMS empfiehlt.
MfG, at
-
-
-
-
-
-
-
-
-
Hi,
Natürlich alles auslagern. Wiege doch mal die Vor und Nachteile ab und du wirst sehen was dabei herauskommt.
prinzipiell gebe ich Dir ja recht. Allerdings mache ich selbst da auch manchmal Ausnahmen. Wenn ich für eine bestimmte Seite eine ganz spezielle Formatierung habe, die mit Sicherheit in den anderen Seiten keine Verwendung findet (auch z.B. eine speziell formatierte Daten-Tabelle in ansonsten tabellenfreien Seiten), dann sehe ich keinen Vorteil im Auslagern. Eher im Gegenteil: Die übrigen Seiten werden dadurch nicht belastet und wenn ich mal an dieser speziellen Seite etwas ändern will, kann ich das diekt in dieser Seite machen.
freundliche Grüße
Ingo-
Hallo,
prinzipiell gebe ich Dir ja recht. Allerdings mache ich selbst da auch manchmal Ausnahmen. Wenn ich für eine bestimmte Seite eine ganz spezielle Formatierung habe, die mit Sicherheit in den anderen Seiten keine Verwendung findet (auch z.B. eine speziell formatierte Daten-Tabelle in ansonsten tabellenfreien Seiten), dann sehe ich keinen Vorteil im Auslagern. Eher im Gegenteil: Die übrigen Seiten werden dadurch nicht belastet und wenn ich mal an dieser speziellen Seite etwas ändern will, kann ich das diekt in dieser Seite machen.
Was heißt belastet? Meinst du dass dieser CSS Code beim ersten laden der CSS Datei mit runtergeladen wird obwohl die Seite auf der er benötigt wird eventuell gar nicht angezeigt wird was sonst entfallen würde?
Machst du dann die CSS angaben in style="" oder oben im Head?
Grüße
Jeena Paradies-
Hi,
Was heißt belastet? Meinst du dass dieser CSS Code beim ersten laden der CSS Datei mit runtergeladen wird obwohl die Seite auf der er benötigt wird eventuell gar nicht angezeigt wird was sonst entfallen würde?
Genau das. Abgesehen davon ist das Haupt-CSS dann auch von solchen einmaligen Definitionen befreit und einen Tick übersichtlicher. Allerdings muß ch zugeben, daß die Fälle, in denen das wirklich Sinn macht, ziemlich selten sind.
Machst du dann die CSS angaben in style="" oder oben im Head?
Natürlich nicht ;-)
jedenfalls wenn es sich vermeiden läßt. Obwohl ich auch hier wieder durchaus sinnvolle Ausnahmen mache. z.B.:
<td title="rot" colspan="2" class="rot" style="height:140px;"><span class="klein">Tanzrichtung</span>
zu sehen auf: http://www.dm-formationen2004.de/karten.html
Hier habe ich diwe Grafik eines Sitzplans mit einer Tabelle nachgebildet und für diese wiklich einmalige Größenangabe kann man sich doch wirklich eine ID sparen, oder?freundliche Grüße
Ingo-
Hallo,
Machst du dann die CSS angaben in style="" oder oben im Head?
Natürlich nicht ;-)Hm was ist das denn für eine Antwort? Ich verstehe das ungefär so:
Frage: Pinkelst du im Stehen _oder_ im Sitzen?
Antwort: Natürlich nicht ;-)Wie soll ich das verstehen?
jedenfalls wenn es sich vermeiden läßt. Obwohl ich auch hier wieder durchaus sinnvolle Ausnahmen mache. z.B.:
<td title="rot" colspan="2" class="rot" style="height:140px;"><span class="klein">Tanzrichtung</span>Ja nun da "vergewaltigst" du eine Tabelle und sie zeigt doch eigentlich gar keine Tabelarischen Daten mehr. Das gilt nicht :-)
zu sehen auf: http://www.dm-formationen2004.de/karten.html
Hier habe ich diwe Grafik eines Sitzplans mit einer Tabelle nachgebildet und für diese wiklich einmalige Größenangabe kann man sich doch wirklich eine ID sparen, oder?Ja in diesem Fall stimmt das. Ich glaube aber dass ich da zu einer Grafik greifen würde. Aber vieleicht doch nicht wegen der Ladezeit könnte ich mich schon dazu hinreisen lassen auch so was zu machen. Genauer gesagt habe ich das auch schon. Ich habe auch eine Statistik mittels Tabelle die divs beinhaltet gestaltet. Da ja dort für jeden Tag eine andere höhe benötigt wird habe ich das auch in style="height: [spezielle Höhe]px;" eingefügt. Im endeffekt mache ich das also genau so wie du.
Ich habe daran nur nicht mehr gedacht und deshalb es auch nicht erwähnt. Hoffentlich denke ich beim nächsten mal daran.
Grüße
Jeena Paradies-
Hi,
Natürlich nicht ;-)
Hm was ist das denn für eine Antwort? Ich verstehe das ungefär so:nunja, beim zusammenbasteln lege ich schon den ein oder anderen inline-style an. Aber wenn's dann stimmt, wandern die in der Regel sofort in ein ausgelagertes CSS.
Ja in diesem Fall stimmt das. Ich glaube aber dass ich da zu einer Grafik greifen würde. Aber vieleicht doch nicht wegen der Ladezeit könnte ich mich schon dazu hinreisen lassen auch so was zu machen.
Bei mir war's außer der Ladezeit (und daß ich nur einen sehr schlechten Scan davon hatte) eigentlich mehr die Herausforderung, mal wieder eine komplexe Tabelle zu basteln, die zudem auch noch so ausgedruckt werden sollte, daß die Farbinformationen nicht verloren gehen; eine Grafik könnte ja evtl. nicht mit ausgedruckt werden...
freundliche Grüße
Ingo
-
-
Hallo.
<td title="rot" colspan="2" class="rot" style="height:140px;"><span class="klein">
Für Klassenbezeichnungen sollten aber schon semantisch nachvollziehbare Namen herhalten.
MfG, at-
Hi,
<td title="rot" colspan="2" class="rot" style="height:140px;"><span class="klein">
Für Klassenbezeichnungen sollten aber schon semantisch nachvollziehbare Namen herhalten.
in diesem Fall ist das semantish nachvollziehbar. Denn der hierdurch definierte Sitzbereich ist farblich rot gekennzeichnet - auch im Flyer - und auch im Text als "rot"er Bereich gekennzeichnet, daher auch der title "rot", den ich hier für evtl. Farbenblinde eingefügt habe.
freundliche Grüße
Ingo-
Hallo.
in diesem Fall ist das semantish nachvollziehbar. Denn der hierdurch definierte Sitzbereich ist farblich rot gekennzeichnet - auch im Flyer - und auch im Text als "rot"er Bereich gekennzeichnet, daher auch der title "rot", den ich hier für evtl. Farbenblinde eingefügt habe.
So etwas hatte ich bei dir fast vermutet. Es ging mir tatsächlich nur um die generelle Methode. Und ohne mein Nachhaken wäre er vermutlich auch ohne deine Erklärung ins Archiv gewandert ;-)
MfG, at
-
-
-
-
-
-
-
Hallo Kristian,
Aber die CSS-Datei wird größer und ich muss ja auch für jedes Objekt eine
eigene Klasse anlegen, so die Eigenschaften der Objekte nicht immer gleich
sind. Dadurch wird ja die CSS-Datei ziemlich groß.Überlege mal anders: Benötigt wirklich zwingend jedes Element eine eigene
Klasse oder kannst Du auch generischere Regeln definieren. Soll heißen:
Regeln, die auch auf mehrere Elemente wirken.Und weiter rationalisieren: Können einige Eigenschaften auf mehrere Elemente
wirken, wie kann man dieses am besten verteilen, daß nicht zu viel
Redundanz entsteht?Ich gebe mal ein paar Beispiele. Zuerst das Stylesheet:
p {
font-size:2em;
margin:20px 40px;
color:black;
background-color:white;
}p#achtungachtung {
font-size:3em;
margin:50px;
border:1px solid black;
background-color:yellow;
}p.hervorgehoben-1 {
border:10px solid red;
}p.hervorgehoben-2 {
border:10px solid blue;
}Jeder normale Absatz kriegt nun eine Schriftgröße von 2em in Schwarz auf
Weiß und einen Randabstand von 20 Pixeln oben und unten und 40 Pixeln
rechts und links:<p>Dies ist ein Absatz.</p>
Fügt man dann noch eine Klasse hinzu, können extra Angaben hinzugefügt
werden. Dieser Absatz hat nun also eine Schriftgröße von 2em in Schwarz
auf Weiß, einen Randabstand von 20 Pixeln oben und unten und 40 Pixeln
rechts und links und zusätzlich einen dicken fetten roten Rahmen:<p class="hervorgehoben-1">Dies ist ein Absatz mit rotem Rahmen.</p>
Dieser hier ebenso, nur in blau:
<p class="hervorgehoben-2">Dies ist ein Absatz mit blauen Rahmen<./p>
Dieser Absatz hat einen blauen Rahmen. Er hat zwar beide Klassen, aber
hier gewinnt die Klasse, die später im Stylesheet steht:<p class="hervorgehoben-1 hervorgehoben2">
Dies ist ein Absatz mit blauen Rahmen.
</p>Dieser Absatz hat eine Schriftgröße von 3em, einen dünnen schwarzen
Rahmen, einen Randabstand von 50 Pixeln zu allen Seiten, einen gelben
Hintergrund und darauf schwarze Schrift. Die schwarze Schrift erbt er
von den Definitionen für einen normalen Absatz, alles andere wird
überschrieben:<p id="achtungachtung">Dies ist ein Absatz, der mich aufmerken läßt.</p>
Und dieser Absatz hat genau dieselbe Formatierung. Er hat zwar eine
Klasse und die zur Klasse gehörende Deklaration steht im Stylesheet nach
der Deklaration für die ID, aber IDs haben eine höhere Wertigkeit als
Klassen, sie »gewinnen«.(Man möge die Farbwahl und die Trivialität des Beispieles entschuldigen)
Wenn man diese Möglichkeiten geschickt nutzt, kann man größere Stylesheets
bequem auf kürzere eindampfen. Man muß nur dabei im Kopf den Gedankensprung
von <font> zu CSS machen. Bei CSS »denkt« man generischer als bei <font>.
Man überlegt sich, welche Angaben generisch sind, welche auf mehrere
Elemente zutreffen, welche auf welche Arten von Elemente zutreffen. Bei
der Nutzung von <font> denkt man mehr in die Richtung, wie jetzt genau
dieses Element formatiert werden soll, nicht in welche Klasse oder Art
von Elementen dieses Element nun gerade fällt und was diese gemeinsam
haben. Und in CSS kann man wunderbar die oben beschriebene Kaskade
ausnutzen - schließlich heißt es ja Cascading Style Sheets.Wenn man die Nutzung von <font> dann eins zu eins auf CSS übertragen will,
dann landet man meist erst bei Inlinestyles mit dem style-Attribut direkt
in HTML oder aber in Massen von class-Attributen, jede auf ein einzelnes
Element (meist ein <div>) zugeschnitten. Dabei sollen Klassen gerade
bestimmte Elemente in Klassen zusammenfassen, das heißt eine Gemeinsamkeit
definieren oder feststellen (richtiger wäre dann wahrscheinlich id).Natürlich muß man dann immer wieder von Fall zu Fall abwiegen und manchmal
geht es auch nicht anders, beispielsweise, wenn man etwas ganz spezielles
vorhat (</chräckerargument>). Wenn das auf Dich zutrifft, dann entschuldige
meinen Sermon. ;-)Aber ein gutes Stylesheet kann dabei helfen, sich nur auf den HTML-Quellcode
konzentrieren zu können, da dieses Stylesheet dann auf mehrere Seiten mit
mehreren Elementen zutrifft. Etwas, das gerade der Vorteil von CSS ist.Tim
-
N'Obend
(...)
Ohne jetzt jedes Wort gelesen zu haben: Genau das hätt ich auch sagen wollen! :)
Man merkt wenn man CSS ausgiebig einsetzt, dass die meisten Formatierungen aus immer den gleichen Gründen gemacht werden.
Überleg dir also einfach aus welchem Grund ein Element deiner Meinung nach eine entsprechende Formatierung benötigt und benenne so deine Klassen.
class="fliesstext", class="termin", class="hinweis", ...
Als netten Nebeneffekt ergibt sich daraus, dass deine Seiten automatisch klarer und gleichmäßiger werden. Hinweise sind so z.B. automatisch alle gleich formatiert, nicht einmal <font size="larger"><b>Hinweis</b></font>, ein anderes mal mit <i>Hinweis</i>. Die Leser werdens dir danken.
So groß werden die CSS-Dateien daher gar nicht.
Tschö,
dbenzhuser-
hi,
Überleg dir also einfach aus welchem Grund ein Element deiner Meinung nach eine entsprechende Formatierung benötigt und benenne so deine Klassen.
class="fliesstext", class="termin", class="hinweis", ...
wobei hier noch anzumerken wäre, dass der wunsch, einen text im derzeitigen layout in der farbe blau zu formatieren, nicht zu class="blau" führen sollte ;-)
gruss,
wahsaga -
Guten Morgen.
Die verschiedenen Arten von Text sind schon gleich definiert ("fliesstext", "hinweis", etc.). Deswegen war ja auch die externe *.css schon vorhanden.
Es ging mir eher um folgendes: Die ganze Seite ist in eine Tabelle gepackt, wobei viele Tabellenzellen nur "fürs Auge" vorhanden sind. D.h. eine(n) individuelle(n) Hintergrund/ Hintergrundfarbe/ Höhe haben. Diese Eigenschaften habe ich den Zellen mit style="..." zugewiesen und wollte ebendiese Angaben auslagern.Du darfst gern einen Blick in den Quelltext der Seite werfen (Stylesheet-Datei unter http://www.raspunicum.de/src/style.css). Ich habe aber gerade beschlossen, die Tabelle größtenteils durch div-Elemente zu ersetzen, das ist glaub' ich sinnvoller.
Trotzdem schönen Dank für die Anregungen,
Kristian
-
-
-
Moin!
Was ist nun vorteilhafter? Alles auslagern und eine große *.css bekommen und dafür einen übersichtlichen Qulltext oder die CSS-Angaben in der HTML-Datei stehen zu lassen?
Ich habe kein Problem damit, bei meinen Projekten CSS-Dateien von 8 kByte und mehr zu benutzen, und parallel dazu reichlich IDs und Klassen im Quellcode. Wobei IDs in meinen Augen unterbewertet werden, denn sie sind wirklich mächtig einsetzbar, insbesondere mit verschachtelten Selektoren.
Es macht dies beispielsweise wenig Sinn:
<table>
<tr>
<td class="tdstyle">
<td class="tdstyle">
...
</tr>
</table>Besser:
<table class="tablestyle">
<tr>
<td>
<td>
</tr>
</table>Und im CSS dann:
table.tablestyle tdFormatiert genauso gut wie td.tdstyle im oberen Beispiel.
Außerdem: Man unterschätze die Macht von <th> nicht! Damit kriegt man praktisch eine CSS-Klasse umsonst mit dazu. Also für Tabellenheader, auch wenn sie rein optisch gar nicht wie eine wirkliche Tabellen-Überschrift formatiert sind, ist das durchaus brauchbar.
- Sven Rautenberg
--
"Habe den Mut, dich deines eigenen Verstandes zu bedienen!" (Immanuel Kant)-
Hallo,
Außerdem: Man unterschätze die Macht von <th> nicht! Damit kriegt man praktisch eine CSS-Klasse umsonst mit dazu. Also für Tabellenheader, auch wenn sie rein optisch gar nicht wie eine wirkliche Tabellen-Überschrift formatiert sind, ist das durchaus brauchbar.
Rufst du jetzt damit auf th irgendwo einzusetzten obwohl es keine Überschrift ist nur um den optischen Effekt zu erzielen? Wenn man sowieso Layout Tabellen benutzt ist das egal aber ich glaube man sollte das noch dazufügen - hiermit geschehen :-)
Grüße
Jeena Paradies-
Hi,
Außerdem: Man unterschätze die Macht von <th> nicht! Damit kriegt man praktisch eine CSS-Klasse umsonst mit dazu. Also für Tabellenheader, auch wenn sie rein optisch gar nicht wie eine wirkliche Tabellen-Überschrift formatiert sind, ist das durchaus brauchbar.
Rufst du jetzt damit auf th irgendwo einzusetzten obwohl es keine Überschrift ist nur um den optischen Effekt zu erzielen?
Lies Dir den Satz nochmal genau durch!
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/-
Hallo,
Lies Dir den Satz nochmal genau durch!
Stimmt wer lesen kann ist klar im Vorteil.
Entschuldigung für die Anschuldigungen Sven.
Grüße
Jeena Paradies
-
-
-
Hallo.
Außerdem: Man unterschätze die Macht von <th> nicht! Damit kriegt man praktisch eine CSS-Klasse umsonst mit dazu. Also für Tabellenheader, auch wenn sie rein optisch gar nicht wie eine wirkliche Tabellen-Überschrift formatiert sind, ist das durchaus brauchbar.
Wenn ich auf jeder zwanzigsten Seite einmal eine Tabelle einsetz, ist das schon viel. So hält sich die "Macht" von <th> dann auch in engen Grenzen.
MfG, at
-
-
Hallo.
Macht es Sinn, alle CSS-Angaben aus einer HTML-Datei komplett in eine externe *.css zu packen?
Mit "Sinn machen" ist das ja ohnehin so eine Sache -- eine im Archiv recherchierbare noch dazu. Aber vom Dateinamen "*.css" kann ich dir nur abraten ;-)
MfG, at