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.

Exempelstruktur för element:

<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:

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