Ga naar inhoud
Lemone Wiki

SCSS class conventies en bestand structuur

Classname structuur

Binnen Lemone gebruiken we BEM als SCSS Syntax en leidraad.

Dus voor onze classnames:

.block__element—-modifier

mocht er een block - element of modifier meerdere woorden bevatten noteren we dat als volgt: (met een - worden de woorden gescheiden per Block enzovoorts..)

.block-card__element-title—-modifier-blue

Een .scss bestand volgens onze standaard ziet er zo uit:

.block {
  &__element {
    //CSS
  }


  &__element {
    //CSS


    &--modifier {
      //CSS
    }
  }
}

Zoals je ziet bevat een SCSS file maximaal één Block waarin onbeperkt Elements en Modifiers mogen worden gebruikt. Hiermee houden we ons aan de BEM syntax.

Hier een voorbeeld uit de praktijk:

@import "collection";
@import "card";


.product {
  &__title {
    line-height: 66px;


    &--bold {
      font-weight: 800;
    }
  }


  &__selector {
    padding-left: 5px;
    list-style-type: none;


    li {
      display: flex;
      align-items: center;
      padding-bottom: 10px;


      &:last-of-type {
        padding-bottom: 0;
      }
    }
  }
}

Bestanden structuur Binnen Lemone hebben wij een vaste bestanden structuur voor onze styling om ervoor te zorgen dat alles zo overzichtelijk mogelijk blijft.

image

We hebben de standaard mappen “Common”, “components” en “Layouts” samen met “main.scss”

Binnen de mappen staan een SCSS bestand met de exacte naam van de map. Hierin worden alle bestanden binnen die map included.

Main.scss Dit is het bestand dat uiteindelijk word meegenomen door Yarn om zo de SCSS te compilen naar CSS. Uiteindelijk bestaat de SCSS structuur uit een groot web van bestanden dat elkaar importeert.

Common Binnen deze map staan allen variabelen, functies en fonts die gebruikt worden binnen het project. Denk hier aan de specifieke Kleuren, Fonts, Font-sizes, knoppen en geïmporteerde stukken code uit het CSS Framework (Bootstrap bijvoorbeeld). Ook worden hier de helper classes gedefineerd samen met Mixins (stukjes SCSS die vaak een functie voorstellen).

Layout Binnen deze map wordt voornamelijk het grid geïmporteerd uit het CSS framework en mogelijke layout aanpassingen.

Components Binnen de components map staan alle componenten van het project. Denk hier aan een Header en Footer bijvoorbeeld.

BEM syntax in combinatie met onze mappen structuur

Het basis principe van BEM (hierboven uitgelegd) combineren we met de bovenstaande mappenstructuur. Binnen “Componenten” word er het meeste BEM SCSS geschreven. Voor ieder Block dat je start binnen de BEM syntax moet hier een nieuw bestand voor worden aangemaakt. Bijvoorbeeld dat je het block: .product hebt. Hiervoor moet een nieuw bestand genaamd “product” worden gecreëerd. Dit moet altijd gebeuren per nieuw SCSS Block.

Zodra een Block meerdere varianten krijgt zoals: product-card, product-track krijgt het originele block zijn eigen map met daarin de meerdere varianten van het block.

image