Colorscheme

Struktur einer Css Datei

Wo war doch gleich? Zum Glück gibt es die Texteditor Suche, sonst würde ich 50% meiner Zeit mit dem Durchforsten der Stylesheets verschwenden, gepaart mit der Web Developer Bar im Firefox ist es nochmal komfortabler. Sinnvoll ist es aber auch, die Struktur seiner Css Dateien sinnvoll zu halten, doch was ist sinnvoll? Das kommt sicherlich auf die Betrachtungsweise an, ich für meinen Teil habe jetzt eine praktische Lösung gefunden (läßt sich womöglich eher auf Blogs anwenden, aufgrund ihrer Beschaffenheit):

  • Anlegen der Css Boxen: Header, Footer, Sidebar usw werden in “Divs” gepackt und diese auch im Stylesheet
  • Jedes Davon wird mit folgender Zeile voneinander abgegrenzt (hat später noch einen Sinn):
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    Durch den Kommentarteil, werden die “~” Zeichen im CSS ignoriert, für das Auge fallen sie als Trenner aber besonders auf, da dieses Zeichen sehr selten verwendet wird.
  • Habe ich jetzt Formatierungen, die nur den Bereich der Sidebar betreffen(, zum Beispiel eine Listenformatierung), schreibe ich diesen Part im Bereich seiner Box hin, die ich ja von den anderen abgegrenzt habe:

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #box_header {
    width: 400px;
    font-weight: bold;
    }
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #box_sidebar {
    width: 200px;
    height: 400px;
    background: white;
    border-bottom: 1px solid black;
    }
    #box_sidebar ul {
    list-style-type: none;
    color: #860000;
    }
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

  • Unübersichtlich wird dies dann nur bei Boxen mit viel unterschiedlichem Inhalt, wie zum Beispiel die “Content” oder “Post” Box. Dafür kann man sich ja andere Trenner ausdenken, dies ist dann aber abhängig von den persönlichen vorlieben

Update: Bei den Webkrauts im Adventskalender habe ich noch einen Beitrag zur Struktur von großen CSS Dateien gefunden: Webkrauts Adventskalender

struktur css

Verwandte Artikel
  1. Webkrauts Adventskalender 2006
  2. CSS3 was die Zukunft bringt
  3. Eine tolle WordPress Permalink Struktur
  4. Die Webkrauts rocken dieses Jahr den Adventskalender
  5. Eigene Rahmen mit kleinen transparenten Gifs gestalten

am Dezember 13, 2005 um 19:35 Uhr | in Design | 1 Kommentar


1 Kommentare
  1. Christian Strang, Dezember 30, 2005:

    Eine wichtige Zusatzinformation kam noch von Simon Duss:

    CSS Dateien werden bald überladen. Da ich gern alles durchstruktuierem, habe ich die einzelnen Style-Sheets ausgelagert mittels @import.
    So besitzt mein aktuelles projekt ca. 8 CSS-Dateien. Sogar den Bereich des Contents habe ich aufgeteilt (algemein, formulare, floats).

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.