CSS Struktur
CSS ist schon überall im Einsatz ohne geht gar nicht eh klar – doch schaut man sich von den Seiten die CSS Datein mal etwas genauer an kann man sofort erkennen das fast jede anders strukturiert wurde!
Hier ein paar Tipps wie ich bei Kunden die CSS Datei aufbaue und Struktur in die Datei bringe!
- Kommentare sind wichtig – man kann an jeder Stelle in der Datei damit Arbeiten mit den /* leitet man ein Kommentar ein und mit */ beendet man es! Dazwischen kann alles stehen!
- weiters sollte man nicht die Schreibweise beachten!
1. Bedingung – 1. Zeile
viele Bedingungen – viele Zeilen.name { border: 0; }
.name {
background: #fff;
float: left;
padding: 0;
} - Im Beispiel oben kann man auch sofort erkennen wie der 2. Block aufgebaut ist – ich verwende immer einen TAB!
.name {
background: #fff;
float: left;
padding: 0;
}
.name {
background: #fff;
float: left;
padding: 0;
}
Diese Art wird schnell unübersichtlich vor allem wenn es sehr viele Zeilen gibt! Hier schaut diese schon viel besser aus!
.name {
background: #fff;
float: left;
padding: 0;
}
.name {
background: #fff;
float: left;
padding: 0;
} - Man sollte immer die Kurzschreibweise von CSS verwenden zb.
.name {
padding-left:2px;
padding-right:2px;
}
Schöner ist:
.name { padding:0 2px;}
Mit diesen paar Tipps könnte ein schönes CSS so aussehen:
/* HEADER Begin */
.header { padding:2px 10px; }
.content {
padding:2px 10px;
font-size:12;
}
.head {
…
}
.text {
…
}
.text a {
…
}
.text a:hover {
…
}
….
/* HEADER Ende*/
Danke das Sie diesen Artikel gelesen haben. Sie können nun eine Nachricht hinterlassen oder bestellen den RSS Feed.
Comments
Hallo Michael,
Also danke für diesen Link – finde es auch eine SUPER Sache jedoch hat das ganze einen kleinen HACKEN – du kannst das File nicht mehr Bearbeiten!
Man müsste das also doppelt ablegen einmal lesbar und einmal optimiert – jedoch ist das dann bei 50-100 Kunden nicht mehr lustig oder – wie machst du das in diesem Fall?
Aber DANKE für den Link finde es super!
LG
T3 Center
Ein gute Möglichkeit wäre für das Produktivsystem noch, den Code zu komprimieren
http://compressor.ebiene.de/