# Styling

Vi använder främst Sass med scss-syntax om en preprocessor används.

## Komponenter

Använd scopad styling i en en Svelte komponent.\
Om man känner behovet av att använda BEM i sin komponent kan det vara ett tecken på att komponenten är för stor och bör brytas ner i mindre delar.\
Prefix på klasser behövs oftast inte då klassen blir scopad till komponenten.

## Global styling

Med global styling menas den styling som ligger på mallar.

* Använd `kebab-case` för filer och mappar.
* Försök ha ett scope per fil.
* Inga prefex i filnamn.
* Använd [BEM](http://getbem.com/).

Exempelstruktur för element:

```html
<div class="sol-article-list">
  <article class="sol-article-list-item">
    <h2 class="sol-article-list-item__heading">...</h2>
    <p class="sol-article-list-item__desc">...</p>
  </article>
  <button class="sol-article-list-button">...</button>
</div>
```

Filstruktur:

```text
article-list
|- button.scss
|- container.scss
|- item.scss
```