CSS Coding Guidelines

Shopware 5 Themes & Design
1

Moin, 

Shopware stellt in den Dev Docs netterweise eine Coding Guideline zur Verfügung. Habe dennoch eine Frage dazu - welche Variante ist korrekt? Es geht um die “–” und Bezeichnung.

Variante 1:

.emotion--slider {
    background: #fff;

    .emotion--slider-inner {
        margin: auto;
    }
}

 

Variante 2:

.emotion-slider {
    background: #fff;

    .emotion-slider--inner {
        margin: auto;
    }
}

 

Variante 3: 

.emotion--slider {
    background: #fff;

    .slider--inner {
        margin: auto;
    }
}

 

2

 

Quelle: https://forum.shopware.com/discussion/39932/css-coding-guideline

3

Hallo @Maybach‍ 

ich beziehe mich auf die von dir geposteten css-coding-guideleines und habe eine frage zu diesen.

Stehe ich hier vll. auf den Schlauch? Wie hilft mit der Link zu der Quelle meiner Fragen nun weiter? :wink:

4

Hey, 

ah okay. Ja dann ist Variante 2 korrekt. :)  Weil emotion-slider der Name des Elements ist und --inner das Kindelement. Bei einwörtigen Elemente wäre es nicht ganz so verwirrend. 

.container {
  .container--inner{}
}


.content-container{
  .content-container--inner{}
}

 

Modifier sind unabhängig vom dem Element also .is–hidden .is–inverted

Du musst immer anhand der Klasse erkennen was das für ein Element ist, was eindeutig sein sollte. Deswegen immer der Elementname mit dran und dann das Kindelement. Allerdings macht man meistens nur eine Ebene von Kindelemente. Also wenn du 3 Ebenen im DOM hast, bleibt es beim Naming allerdings bei zwei.

 

1 „Gefällt mir“