CSS oder LESS, wo ist der Unterschied?

css-oder-less

Jeder der schon einmal eine Website gebaut hat, hat bereits festgestellt dass man mit CSS das Design entscheidend beeinflussen kann.

Ob nun die Breite, Höhe, Farbe, Kontur, Drehung, Außen- oder Innenabstand verschiedener DOM-Elemente. Alles ist machbar.

Es ist eigentlich vollkommen leicht. Man fügt einem wiederkehrendem Element eine Klasse und eindeutigen Elementen eine ID hinzu. Auf diese kann man nun in einer CSS Datei zugreifen und das Element verändern.

Ein Beispiel:

HTML

<div class=”schwares quadrat”></div>

CSS:

.schwares{

background: black;

}

.quadrat{

width:100px

height: 100px;

display:block;

}

Doch wenn man nun entschieden hat ein relativ komplexes Design zu entwicklen wird man schnell merken, dass ineinander verschachtelte Elemente schwieriger zu designen sind als man anfangs vermutet. Das liegt daran, dass man den beliebten Anfängerfehler macht und für jedes Element zunächst einmal Klassen schreibt, was ja auch funktioniert. dies kann jedoch sehr unübersichtlich werden, deshalb gibt es noch eine Möglichkeit.
Man kann nämlich die Child-Elemente, also auf gut deutsch die erbenden Kind Elemente eines Containers abhängig zu diesem definieren. Das klingt natürlich erst einmal kompliziert, ist es aber nicht. Dazu wieder ein Beispiel:

Wir wollen alle div Elemente in dem einen Container schwarz und in den anderem Rot färben.

Dazu müsste man soggesehen erst einmal den Container definieren und dann jedes einzelne Element immer wieder mit einer Klasse Schwarz oder Rot bestücken. Dies kann aufwändig werden, besonders wenn man zusätzlich noch mit jQuery Elemente hinzufügen will, wie zum Beispiel in einer Liste.

Also versuchen wir es mal mit der Vererbung:

Zunächst das HTML

<div class=”quadrate rot”>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class=”quadrate schwarz”>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

Jetzt kommt etwas CSS hinzu:

Erst einmal definieren wir die Container, dies ist schnell für beide Erledigt da beide die Gleiche Klasse haben:

.quadrate{

width:100%;

min-height:50px;

display:block;

}

Jetzt wollen wir die Div’s in .quadrate alle quadratisch machen, dies geht so:

.quadrate div{

width:50px;

height:50px;

float: left;

}

Die Quadrate sind nur 50 Pixel Breit und 50 Pixel Hoch. Zudem habe ich einen float hinzugefügt, welcher bewirkt, dass die Div Elemente sich von links nach rechts aufreihen statt untereinander zu erscheinen.

Jetzt fehlt nur noch die Farbe. Dazu schreibe ich die komplette folge der Klassen im container auf und das Element was ich behandeln will:

.quadrate.schwarz div{ background: #000}

.quadrate.rot div{ background: #F00}

Also alles in allem noch sehr Wenig Code. Will man jetzt aber noch mehr Elemente hinzufügen und einzeln designen, kann dies schon sehr kompliziert werden.

Deshalb wurde LESS entwickelt.

Der Ganze Code einmal in Less:

.quadrate{

width:100%;

min-height:50px;

display:block;

.schwarz div{ background: #000}

.rot div{ background: #F00}

 

div {

width:50px;

height:50px;

float: left;

}

}

Vielleicht ist ihnen der Unterschied bereits aufgefallen, wenn nicht werde ich es noch einmal erklären: Da wir diverse Elemente innerhalb einer Klasse behandeln wollen, ist es bei LESS möglich in einer Klasse Definitionen UND Klassen zu erstellen.

Somit verschachtelt sich das CSS genauso wie das HTML und alles ist wieder wesentlich übersichtlicher und meist auch weniger (englisch: less) Schreiberei beim Design.

LESS kann aber noch mehr. Hier ist es nun möglich wie in Programmiersprachen Variablen zu verwenden. Ein beliebtes Beispiel hierfür wär die Farbe. So kann man nun seine Template Farben einmalig definieren und diese Variablen im Design verwenden. Ändert sich mal die Meinung, muss lediglich die Variable verändert werden und schon ist das Template Blau statt Rot.

Alles in allem ist CSS immer noch sehr aktuell, jedoch werden die Herausforderungen komplexer WEB 2.0 Interfaces immer größer, und deshalb ist es gut und schön zu Wissen, dass man noch LESS in der Hinterhand hat. Da LESS mit Javascript funktioniert ist es etwas komplizierter einzubinden, aber dazu folgt noch ein Tutorial in naher Zukunft.

Fazit:

CSS ist simpel und schnell einzusetzen, da es überall von anfang an Verfügbar ist.

Wer jedoch ein komplexeres Design hat, und evtl. sogar mit JQuery oder ähnlichem die Dom-Elemente beeinflussen möchte, sollte vielleicht mal zu LESS greifen, da dies eine zeitsparende und angenehmere Variante ist.

You may also like...