Die Qualität einer Website definiert sich nicht zuletzt auch durch die Qualität des Codes. Ein essentieller Grundstein ist dabei das Stylesheet. Da CSS „unter der Haube“ liegt, wird es zu oft vernachlässigt. Hier zeichnet sich die Professionalität und Qualität durch Namensgebung und Struktur, aber auch Dateigröße und Renderingzeit aus. Aus diesem Grund nutzen wir Sass und BEM, um einen einheitlichen Standard im Dev-Team festzulegen und die CSS-Architektur zu verbessern.

Was ist Sass?

Für diejenigen, die noch nie davon gehört haben, hier eine Kurzzusammenfassung: Sass/SCSS ist, genauso wie beispielsweise Less, ein CSS Preprocessor. Ein CSS Preprocessor interpretiert Code und generiert daraus CSS-Code. Warum diese Technik heute quasi zum guten Ton jedes Frontend-Entwicklers gehören sollte?

  • es ergänzt CSS um die Funktionen, die jeder vermisst (Variablen, Mixins und Functions)
  • die Stylesheets werden mehr DRY = Don’t Repeat Yourself
  • Zeitersparnis durch effizientere Schreibweisen
  • einfachere Wartung und Pflege
  • Organisation des Codes
  • es macht Spaß! Nein, wirklich, es macht richtig Spaß :D

Hier ein paar einfache Beispiele:

.classname {
	a {
	}
	.subclass {
	}
}
.classname {
}
.classname a {
}
.classname .subclass {
}

But wait, there’s more!

// Farben aufhellen, abdunkeln, mehr Sättigung, in RGBA konvertieren, etc. – Alles kein Problem!
lighten(#ff0000, 10%);
rgba(#ff0000, 0.75);

// Mixins sind kleine Helferlein, die selbst definiert werden können. Lästige Schreibarbeit von Browser-Prefixes adé!
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
 }

.box { @include border-radius(10px); }

.box {
 	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

Achja, CSS Kommentare mit // sind auch möglich. Diese werden nachher nicht im CSS angezeigt. Lediglich die normalen /**/ Kommentare werden mit übernommen.

Variablen und Funktionen für CSS – allein dieses Feature erleichtert die Arbeit an Webprojekten immens. Schriften und Farben können beispielsweise global festgelegt werden. Das macht die Änderung der Firmenfarbe zum Kinderspiel. Wir öffnen lediglich eine Datei, ändern den Wert der Variable und alle Farbwerte werden entsprechend angepasst – ein Traum!

BEM – Block Element Modifier

Um es in einem Satz zu sagen: BEM ist eine Namenkonvention. Die BEM-Methode hilft dabei, Komponenten* wiederverwendbar zu machen und vor allem Benennungen zu vereinheitlichen; so kann Code einfacher mit anderen Entwicklern geteilt und entwickelt werden. Neben BEM gibt es auch andere Modelle, wie OOCSS, AMCSS, SMACSS oder SUITCSS.

* Das HTML-Markup und die dazugehörigen Styles sollten abgeschlossene, unabhängige Komponenten sein, die zusammen das Layout der Website bilden. So können einzelne Komponenten losgelöst wiederverwendet werden.

Ein kurzer BEM-Crashkurs: Namen setzen sich aus drei Komponenten zusammen: Block, Element und Modifier. Dabei werden nur Klassen verwendet, also keine IDs oder Tag-Namen.

Blöcke bezeichnen eine alleinstehende Einheit von Elementen und hängen somit nicht von anderen Blöcken oder Elementen ab. Kein div.button, div .button, body .button etc.

<div class=„button“>…</div>

Ein Element ist ein Teil eines Blocks. Jedes Element ist semantisch an seinen Block gebunden.

<div class=„button“>
	<span class=„button__text“>…</span>
	<span class=„button__price“>…</span>
</div>

Ein Modifier ist eine Modifizierung eines Blocks oder Elements.

<div class=„button button—-highlight button-—center“>…</div>

Auf der Website zu BEM ist es sehr gut erklärt: http://getbem.com/naming/

Warum BEM?

Die Struktur von BEM hat uns sofort gefallen und war nach einer kurzen Eingewöhnungsphase auch sehr einfach umzusetzen. Wir können sie nur jedem Entwickler-Team ans Herz legen:

  • flache Struktur der Klassen, keine Verschachtelungen / Vererbungen, keine IDs oder Tags = kein elendes !important
  • schnelle Übersicht über Kind-Elemente und Modifier
  • Abhängigkeit bzw. Zugehörigkeit von CSS-Klassen bereits im Code erkennbar .button__price hängt von .button ab
  • einfachere Kommunikation innerhalb eines Teams durch Festlegung einer Syntax
  • keine Angst vor Wartung oder Ergänzung von CSS

„While 100 % predictable code may never be possible, it’s important to understand the trade-offs you make with the conventions you choose. If you follow strict BEM conventions, you will be able to update and add to your CSS in the future with the full confidence that your changes will not have side effects.“

– Philip Walton (https://philipwalton.com/articles/side-effects-in-css/)

Offensichtlich werden die Vorteile meist nur, wenn man es wirklich einmal ernsthaft ausprobiert hat. In vielerlei Hinsicht hat sich unsere Denkstruktur beim Entwickeln von HTML und CSS verändert. Unsere bisherige Erfahrung zeigt, dass es genau die richtige Entscheidung war!

Übrigens, viele der ersten „Warum?“-Fragen werden im FAQ auf der offiziellen Seite beantwortet: http://getbem.com/faq/

Sass + BEM = [<3]

Für uns ist durch das Zusammenspiel von Sass und BEM eine ganz neue, bessere Welt entstanden. Klar, es ist kein magischer Trank der alle Probleme löst, aber die meisten Probleme, die wir mit CSS hatten, sind beseitigt. Unsere Stylesheets sind einfach und schnell zu lesen und zu warten.

.button {
	&—highlight {
	}
	&__text {
	}
}
.button {
}
.button—highlight {
}
.button__text {
}

Neben der Nutzung von Sass und BEM haben wir ebenfalls einen Code-Styleguide erarbeitet, um die Entwicklungsarbeit weiter zu systematisieren. Mehr darüber wird es im zweiten Teil der „Geek-Talk“-Serie geben.

Quellenangaben

  1. http://sass-lang.com/
  2. http://getbem.com/
  3. http://thesassway.com/
  4. https://css-tricks.com/bem-101/
Weitersagen: Google+
Zu finden in und unter den Schlagwörtern .

von monaalexandra

Webdesignerin & Frontend Entwicklerin – mein Herz schlägt für Design & Code gleichermaßen. Ich arbeite außerdem in den Bereichen Content Strategy, SEO und Social Media. Mein Lieblings-CMS ist WordPress und neben meinem iMac darf eine Tasse Chai nicht fehlen.

Kommentare (2)

  • Da ich gerade Euren Kommentar über dem Mixin sehe bzgl. „keine browser prefixes mehr!“:

    Kennt ihr schon den PostCSS autoprefixer? CSS3 schreiben und automatisch die prefixes bis zur angegebenen Browserversion nach Lastenheft automatisiert einfügen lassen!
    Siehe: https://github.com/postcss/autoprefixer

    Ich würde Euch übrigens empfehlen, dass sass mit node-sass zu builden. Einfach super schnell bspw. im Gegensatz zu compass – Vergleichbar zu libsass.
    Siehe: https://github.com/sass/node-sass

    Viele Grüße!

    • Hi Philipp,

      Autoprefixes steht auf der ToDo-Liste – Danke dafür!
      Aktuell nutzen wir einen PHP-Compiler, den wir direkt in unseren WP-Themes integriert haben – aber wer weiß, wie sich der Workflow in diesem Jahr noch entwickelt… :)

      Liebe Grüße!

Einen Kommentar schreiben

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>