Hallo,

macht es Sinn, wenn man für jede Sektion einer Homepage eine separate CSS-Datei anlegt?

Ich dachte da an folgendes Schema:

- Haupt-CSS (beinhaltet das Design der Webseite, Navigation etc.)
- Kategorie 1-CSS (beinhaltet alle CSS-Anweisungen für Kat. 1, Beispiel: Kategorie über Autos)
- Kategorie 2-CSS (beinhaltet alle CSS-Anweisungen für Kat. 2, Beispiel: Kategorie über Flugzeuge)

etc.

Wäre das sehr sinnvoll oder eher ungünstig?

Ungünstig. Mehrere HTTP-Requests. Und mehr Aufwand. Würde es nicht machen...

Hi Dom,
ich kann dir nur lesscss empfehlen, .
Das erlaubt dir deine Stylesheets eher wie ein kleines Programm zu erstellen, beispielsweise kannst du Farben und Breiten in Variablen speichern und mit den entsprechenden Werten rechnen.

Zur Einbindung in deine Webseite lässt du dir dann das resultierende CSS einmalig generieren und bindest das ein.
=> in der Regel auch nur ein HTTP Request, aber dafür Ordnung und Übersicht während der Entwicklung.

Sehr sinnvoll wenn man sich selbst behindert.

Oder andersherum:

Wäre es sinnvoll, umfangreiche CSS-Deklarationen für eine HTML-Datei in die HTML-Datei selbst abzuspeichern?

Damit würde dann die CSS-Datei wesentlich entlastet werden.

Ich kenne mich zwar nicht so mit der Schnelligkeit in Browsern und so aus, schreibe selbst in CSS und es würde für die Übersichtlichkeit durchaus Sinn machen, ob dadurch etwas schneller oder langsamer wird weiß ich nicht, aber theoretisch muss dann nur das CSS in der HTML Datei geladen werden und nicht das CSS für alle Seiten gleich mit.
Naja ich habe sowieso keine Ahnung, würde mich aber auch interessieren, was das beste ist.

Das macht nur Sinn, wenn das durch ein Tool oder CMS automatisch gemacht wird. Dadurch lässt sich mindestens ein HTTP Request sparen.

Zum Entwickeln sind getrennte Files absolut notwendig, damit die Trennung von Inhalt und Gestaltung erhalten bleibt. So behält man etwas den Überblick. Wenn die Kategorien nicht absolut unterschiedlich aussehen, macht eine Unterscheidung nach Kategorien wenig Sinn. Ich splitte mein CSS-Code intern immer in 5 Files auf:

• reset.css: Ein typisches Reset-Stylesheet, z.B.
• colors.css: Vorder- und Hintergrundfarben, Hintergrundbildchen
• typo.css: Schrifttarten, -größen, -varianten
• layout.css: Grundlayout, Paddings, Margins, Floats
• print.css: Alles, was man zum anständigen Drucken braucht

Na ja, ich habe eine CSS Datei die ca. 11 KB groß ist und in der alles gespeichert ist: Layout, Farben, und halt unterschiedliche Formatierungen für die einzelnen Artikel.

Wenn es für deine private Seite mit 5 fünf Besuchern am Tag ist, ist es vollkommen egal. Für kommerzielle Seiten solltest du dir mal die "Best Practices for Speeding Up Your Web Site" anschauen:

Hallo One Two,

es handelt sich um die Homepage eines gemeinnützigen Vereins.

Meine Ziele bei der Homepageerstellung war immer standardkonformes HTML/CSS, Übersichtlichkeit und schnelles Laden.

Oder anders ausgedrückt: Eine Webseite ohne Schnickschnack.

Und danke für den Link!

Klare Empfehlung: möglichst nur ein Stylesheet verwenden, zur Übersichtlichkeit am besten Less verwenden, denn das erleichtert das arbeiten im ein Vielfaches! Vor allem wenn du später mal Änderungen durchführen willst (zb den kompletten Farbstiel der Seite mit nur einer kleinen Änderung umsetzen kannst)

Dann die Less Datei umwandeln und komprimieren. Das solltest du am besten mit allen Dateien machen, bei denen das geht. Allerdings natürlich nur für den Live-Server. Du selbst behältst die natürlich die unkomprimierten Files.

Dabei fällt mir ein. Kennt jemand ein Programm, mit denen man sein Stylesheet auf Sinnhaftigkeit und doppelte Definitionen hin überprüfen kann?

Mir ist nämlich letztens erst aufgefallen, daß ich etwas aus Versehen doppelt definiert hatte.

Zeig doch mal den Link, dann hagelt es noch mehr Feedback.

Ich habe da eine Webseite gefunden:

http://csslint.net/


Was haltet ihr davon?

csslint eben getestet, irgendwie zu flach.
Ich arbeite des meistens cascadierend, z.B. das h1,h2, etc, die selben Farben und Schriftarten haben, aber verschiedene Grössen und Abstände mit erneuten h1 und h2 selektoren. Das findet csslint sei ein Fehler, da hab ich apfel w gedrückt und das ding vegessen.

Ausserdem arbeite ich auch mit less und darin auch verschachtelt, dann kommt dad Ding gar nicht mehr klar.

Apropos, sinhaftigkeit, da ist less ein netter filter, was der browser als falsch verstehen würde gibt less mit einem Fehler mit definition auf welcher Zeile aus.

Ich arbeite auch gerne mit einem visuellen editor (z.B. cssedit oder Espresso) da sind die selektoren einfach schneller zu erkennen.

Ist Less ein Programm?

Ja und nein,

im Grund ist "less" ein "css" mit selbsterfunden Variablen die Browser nicht verstehen und deswegen erst durch einen Interpreter laufen muss.

Dieser kann als javascript, php, ruby auf dem Server laufen, so das das css in laufzeit erzeugt wird.



Diverse Interpreter laufen auch als Programm auch auf dem Mac/Win, einer heisst auch "less":



Da ich etwas lässig bei tippen bin lasse ich mich beim schreiben gerne durch ein Programm (Espresso, nicht optimal aber ich kenne nichts besseres) unterstützen.
Ich benenne die ".css" in ".less" um, sage dem LESS interpreter auf dem Mac wo diese liegt und sage wo er die css Datei speichern soll. Wenn kein Fehler im CSS ist passiert das, wenn nicht dann meckert das ding und sagt die Zeile wo er gestoppt hat.
Das erzeugt CSS kann sogar von unnötigen leerzeichen und Kommentaren befreit werden, nennt sich dann komprimiert und wird dann etwas kleiner.

Input der Webkrauts:

Was ich an CSS Lint interessant finde ist, dass es meint, div#navigation wäre überdimensioniert.
#navigation würde ausreichen.

Stimmt das denn überhaupt?!

Ja.
Die Raute ist ein ID Selektor. Nachdem IDs einmalig vorkommen sollten, ist das vorausgehende div unnoetig.

Auch das mit einer einem Rautenselektor nur div angesprochen werden können macht das div vor dem Selektor überflüssig.

Mit einer Klasse lassen sich auch spans ansprechen.