CSS/SCSS-Styleguide
- Dominik Hisler
Die nachfolgenden Standards sollen beim Erstellen und Bearbeiten von CSS bzw. SCSS-Code in brandbox beachtet werden. Normalerweise wird in brandbox nur SCSS-Code erstellt, welcher durch einen internen Prozess in CSS übersetzt wird. Diese Übersetzung wird durch brandbox/component-fractal angeboten. Die nachfolgenden Standards orientieren sich an der BEM-Notation.
Selektoren
In BEM wird ein CSS-Selektor in drei Segmente unterteilt: den Block (in brandbox die Komponente), das Element und den Modifier. Zwischen einem Block und einem Element werden zwei Unterstriche als Unterteilung genutzt, zwischen einem Block/Element und einem Modifier werden zwei Bindestriche genutzt. Zudem wird eine Komponente niemals ohne einen Modifier angesprochen. Der Standard-Modifier ist standard. Es gibt keine zusätzlichen Einschränkungen für die Namen von Element und Modifier.
/**
* Der Name der Komponente ist "example-article"
* Der Names des Modifiers ist "standard"
*
* Daraus wird folgender Selektor gebildet:
*/
.example-article--standard {}Variablen
In CSS und SCSS stehen Variablen zur Verfügung. Der Name einer Variable setzt sich aus dem Namen des Styleguides sowie dem Namen der Komponente zusammen. Es werden Bindestriche als Unterteiler genutzt und bei CSS-Variablen muss zusätzlich das Prefix var genutzt werden. Weitere Informationen zu CSS-Variablen finden Sie im Mozilla Developer Network. Variablen sollten bei Farbwerten, Größenangaben, Abständen sowie Rahmendefinitionen eingesetzt werden. Dadurch ergibt sich eine leicht anpassbare Komponente.
/**
* Definition einer SCSS-Variable:
*
* Der Name des Styleguides ist "example-styleguide"
* Der Name der Komponente ist "example-article"
*/
$example-example-article-height: 35px !default;
/**
* Definition einer CSS-Variable:
*
* Der Name des Styleguides ist "example-styleguide"
* Der Name der Komponente ist "example-article"
*/
* {
--var-example-example-article-height: 35px;
}Verschachtelung
In BEM sollte die Verschachtelung von Selektoren so weit es geht vermieden werden. In brandbox muss eine Komponente immer mit einem Modifier angesprochen werden, daher gibt es immer mindestens eine Ebene der Verschachtelung. Das Ansprechen von anderen Komponenten sollte ebenfalls vermieden werden. Wenn Komponenten weitere Komponenten als Kinder aufnehmen können, sollten die Selektoren mithilfe von > eingeschränkt werden, damit es keine Seiteneffekte durch die übergeordnete Komponente gibt.
<!-- Aufbau der Komponente "custom-article" -->
<div class="custom-article custom-article--standard custom-article--rounded">
<img src="..." class="custom-article__image">
<h1 class="custom-article__name">Artikelbezeichnung</h1>
<p class="custom_article__description">Lorem Ipsum dolor...</p>
</div>Schrift- und Hintergrundfarben
Sofern es nicht notwendig ist, sollte eine Komponente keine Schrift- oder Hintergrundfarbe innerhalb des Standard-Modifier definieren. Für Schrift- und Hintergrundfarben sollten spezifische Modifier für die entsprechende Komponente erstellt werden.
Weitere Konventionen
Es können in der Zukunft weitere Konventionen und Standards etabliert werden. Bis dahin gelten keine weiteren spezifischen Einschränkungen. CSS- sowie SCSS-Code sollte so einfach und klein wie möglich gehalten werden.