CSS & HTML-Tutorials auf nicogutmann.de

Ordnung und Stetigkeit

Mittwoch, 4. November 2009, um 18:53 Uhr in CSS-Tutorials.

Vor allem CSS-Dateien sind oft recht groß und werden schnell unübersichtlich. Farbliche Akzentuierungen, unterschiedliche Schriftgrößen, etc sind in so einer Textbasierten Datei nicht möglich. Trotzdem kann man und sollte man dieses Chaos wenigstens ein Stück weit beseitigen, das erspart einem selbst eine Menge Zeit und auch den Betrachtern deiner CSS-Dateien (Bei Fehlersuche, bei Kopieren von Passagen) und ist ziemlich simpel umzusetzen.

Es fängt am Anfang an

Bereits ganz oben in einer CSS-Datei ist es wichtig einige Dinge zu definieren, hinzuschreiben. Was ihr genau hinschreibt, ist euch überlassen, aber zumindest der Name der Website, das Erstellungsdatum und die Farben sollten dort ihren Platz finden:

/*
/////////////////////////////////Name des Dokumentes: "screen.css"Erstellt von: "Nico Gutmann"
Erstellt für: "tuts.nicogutmann.de"
Erstellungsdatum: "06.08.2009"
Letzte Ąnderung: "03.11.2009"Farben:
----------------
blau: #054c98
lila: #8a24ac
rot: #bf2304
grün: #359721/////////////////////////////////
*/

Das ist mein Kopfbereich, der genügt mir persönlich sehr und die wichtigsten Aspekte wurden aufgegriffen.

Kommentiert alles mögliche

Kommentare sind elementar für die Grundordnung einer CSS-Datei. Dabei solltest du klare Abtrennungen machen und ähnlich bei einem Text mit Teilüberschriften arbeiten.
Da es nicht möglich ist, Schriftgrößen zu verändern oder auch farbliche Akzente zu setzen, muss das auch andere Weise geschehen. Auch hier ist die finale Exekution dir überlassen, ich arbeite gerne mit Querstrichen und Trennstrichen:

/* /////////////////////// Allgemeines /////////////////////// */html,body {
   height: 100%;
}/* /////////////////////// Wrapper & Kopf /////////////////////// *//* Umhuellendes Div
-------------------------*/#seite {
   width: 100%;
   min-width: 800px;
   max-width: 960px;
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto;
   position: relative;
   font-size: 80%
}

Einrücken bei den Kindern

So hast du bereits eine ganz gute Ordnung in deinem Stylesheet. Um den Deckel draufzumachen, kannst du noch mit inrückungen dort arbeiten, wo du mit Kindselektoren arbeitest. Bei einem Menu dann beispielsweise die Definition für die einzelnen Menupunkten von dem Menuobjekt einrücken:

/* /////////////////////// Navigation /////////////////////// */ul#navi {
   background: url(imgs/header.png) no-repeat;
   margin: -50px 0 10px;
   padding: 145px 0 0 0;
   border-bottom: 1px solid #000;
   overflow: hidden;
   height: 36px;
   width: 100%;
}    #navi li {
      float: left;
      width: 25%;
      height: 36px;
      line-height: 37px;
      text-align: center
   }       #navi a {
         color: #555;
         display: block;
         width: 100%;
         text-decoration: none
      }

Stetigkeit in den Namen

Neben den strukurellen Aspekten darf die Namensgebung einzelner Klassen, IDs und Bereiche nicht unterschätzt werden. Such dir sinnvolle Namen aus und bleibe bei allen Projekten bei diesen.
Das umhüllende Element einer Seite wird gerne #wrapper genannnt, ich nenne es #seite, bei all meinen aktuellen Projekten. Die Navigation natürlich dann #navi und den unteren Teil #site-info. Dabei ist es wichtig diese Namen beizubehalten, damit ihr ersten immer genau wisst, wobei es sich handelt, wenn ihr auf eure CSS-Dateien nach längerer Zeit wieder zugreifen müsst und ihr könnt euch Teile eurs HTML-Markups und des CSS kopieren und ohne Änderungen in ein neues Projekt einbinden, was viel Zeit sparen kann.

Mehrere CSS-Dateien

Bei großen Projekten (diese Website zähle ich nicht dazu) ist es auch durchaus sinnvoll seine Stile auf mehrere CSS-Dateien auszulagern, denn nach einer bestimmten Länge findet man einfach nichts mehr, auch wenn man seine CSS-Datei noch so gut auskommentiert hat.
Dabei ist es natürlich jedem frei und auch ab und an projektabhängig, wie man diese Dateien auslagert und benennt. Ich persönlich finde eine sinnvolle Separation in 3 Dateien sinnvoll: layout.css, inhalt.css und menus.css.

Dabei kommen alle Eigenschaften, die das Layout betreffen in die layout.css Datei, dazu gehören dann die Eigenschaften, die das Layout ohne konkrete Inhalte definieren, wie Seitengröße, Kopfbereich, Site-Info und die Positionierung der Objekte.
Die inhalt.css-Datei erklärt sich von selbst und da bei größeren Projekten oft viele Menupunkte die Website beherrschen, gibt man dem Menu/den Menus auch noch eine eigene Datei.

Das ist natürlich eine subjektive Anordnung, es gibt auch einige, der ihre Stile komplett nach Eigenschaften separieren. Da kommen dann alle Positionierungen in eine Datei, alle Schriftdefinitionen, alle Abstände, etc. Davon halte ich persönlich nicht viel, da wird man doch bekloppt.