# CSS Coding Guidelines

**URL:** https://forum.shopware.com/t/css-coding-guidelines/48927
**Category:** Themes & Design
**Created:** [19. Oktober 2017 um 08:04 UTC](https://forum.shopware.com/t/css-coding-guidelines/48927 "2017-10-19T08:04:55Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)
#### Post date: [19. Oktober 2017 um 08:04 UTC](https://forum.shopware.com/t/css-coding-guidelines/48927/1 "2017-10-19T08:04:55Z")

</div>

Moin,&nbsp;

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;
    }
}

```

&nbsp;

Variante 2:

```
.emotion-slider {
    background: #fff;

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

```

&nbsp;

Variante 3:&nbsp;

```
.emotion--slider {
    background: #fff;

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

```

&nbsp;

---

<div class="post-metadata">

### Author: ![Maybach](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Maybach](https://forum.shopware.com/u/Maybach)
#### Post date: [24. Oktober 2017 um 08:26 UTC](https://forum.shopware.com/t/css-coding-guidelines/48927/2 "2017-10-24T08:26:48Z")

</div>

> **[CSS coding guidelines](https://developers.shopware.com/blog/2016/08/26/css-coding-guidelines/)**
>
> Coding guidelines are important to improve collaboration and code quality. A lot of questions regarding our CSS coding
> guidelines are coming up on our vari

&nbsp;

Quelle:&nbsp;[https://forum.shopware.com/discussion/39932/css-coding-guideline](https://forum.shopware.com/discussion/39932/css-coding-guideline)

---

<div class="post-metadata">

### Author: ![mdsw](https://avatars.discourse-cdn.com/v4/letter/m/94ad74/32.png) [@mdsw](https://forum.shopware.com/u/mdsw)
#### Post date: [27. Oktober 2017 um 13:28 UTC](https://forum.shopware.com/t/css-coding-guidelines/48927/3 "2017-10-27T13:28:48Z")

</div>

Hallo @Maybach‍&nbsp;

ich beziehe mich auf die von dir geposteten&nbsp;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? 😉

---

<div class="post-metadata">

### Author: ![Maybach](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Maybach](https://forum.shopware.com/u/Maybach)
#### Post date: [27. Oktober 2017 um 14:46 UTC](https://forum.shopware.com/t/css-coding-guidelines/48927/4 "2017-10-27T14:46:36Z")

</div>

Hey,&nbsp;

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

```
.container {
  .container--inner{}
}

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

```

&nbsp;

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.

&nbsp;