Dieser CSS-Code "Quälcode"?

[Sven Rautenberg]

Moin!

Viele Leute haben diesen folgenden Code als "Quälcode" bezeichnet...

Was findet ihr denn daran auszusetzen?

Er ist in einigen Punkten durchaus optimierungsfähig, was Anzahl der Zeilen und Sinnhaftigkeit der Einheiten angeht. Aber so ganz extrem, wie "Quälcode" es andeuten würde, ist es nicht.

  

>   body {  
>     color: #000000;  

/* Es gibt auch die Kurzform #000 für diese Farbe */  

>     background-color: #D2A74C;  
>     background: url("../pictures/gfx/layout_yellow/bg.gif") repeat;  

/* Weiter unten konntest du die Zusammenfassung von background-color und background noch */  

>     font-size: 12pt;  

/* Für Bildschirmdarstellung verwende nicht pt, sondern px - oder eine relative Einheit deiner Wahl. Für Druckstylesheets hingegen ist pt, cm, mm oder in eine gute Einheit */  

>     font-family: Helvetica, Arial, sans-serif;  
>     margin: 0px;  
>     padding: 0px;  
>     text-align: center;  
>     vertical-align: middle;  

/* Das vertical-align wirkt sicherlich nicht so, wie du es dir vorstellst. Es zentriert vertikal INNERHALB der Textzeile, nicht innerhalb des gesamten Bodys. Dafür bräuchte es eine Tabellenzelle oder ein Element, welches wie eine formatiert ist (display:table-cell). */  

>   }  
>   

[...]  

>   
>   h1 {  
>     font-size: 18pt;  
>     margin-top: 0px;  
>     margin-left: 0px;  
>     margin-right: 0px;  
>     margin-bottom: 10px;  

/* Das kann man auch zusammenfassen zu:  
margin: 0px 0px 10px 0px;  
/* Die Reihenfolge startet oben und geht im Uhrzeigersinn rundherum. Fehlen hinten Werte, wird der Wert der gegenüberliegenden Seite verdoppelt. */  

>     padding-top: 0px;  
>     padding-left: 0px;  
>     padding-right: 0px;  
>     padding-bottom: 5px;  

/* dito */  

>     text-align: center;  
>     vertical-align: bottom;  
>     background: url("../pictures/gfx/layout_yellow/header.gif") no-repeat #D2A74C;  
>     border-width: 1px;  
>     border-style: solid;  
>     border-color: #9F601C;  

/* Diese Border-Angaben gehen auch prima in genau eine Zeile: */  
border: 1px solid #9F601C;  

>   }  
>   
>   ul.navi {  
>     width: 200px;  
>     margin-top: 0px;  
>     margin-bottom: 10px;  
>     padding: 0px;  
>     border-width: 1px;  
>     border-style: solid;  
>     border-color: #9F601C;  
>     background: #D2A74C;  

/* Mit background wird wesentlich mehr gesetzt, als mit background-color. Es ist eventuell ratsam, hier also background-color zu schreiben. */  

>     vertical-align:middle;  
>   }  

[...]  

- Sven Rautenberg