Nesting van Selectors & de Parent Selector (&) met BEM

In de vorige lessen heb je geleerd hoe je met SCSS variabelen aanmaakt en eenvoudig selectors in elkaar opsluit (nesting). Maar wat gebeurt er als je pseudo-klassen zoals :hover wilt toevoegen, of wanneer je werkt met de BEM-methode (Block, Element, Modifier)?

Daar komt de magische Parent Selector (&) in SCSS om de hoek kijken. Met dit simpele teken schrijf je veel schonere, beter georganiseerde en sneller te onderhouden code!

---

1. Wat doet de Parent Selector (&)?

In SCSS staat het &-teken voor de parent selector (de bovenliggende selector). Het verwijst letterlijk naar het CSS-blok waar je op dat moment binnenin aan het typen bent.

Wanneer je SCSS compileert naar standaard CSS, plakt de compiler het &-teken vast aan de selector waarin het zich bevindt.

---

2. Toepassing 1: Pseudo-klassen en Pseudo-elementen

Bij standaard CSS herhaal je voortdurend de klassenaam om een :hover of :focus status aan te spreken. In SCSS gebruik je daar direct & voor.

SCSS Code:

.btn {
    background-color: #2563eb;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;

    // & verwijst hier naar .btn
    &:hover {
        background-color: #1d4ed8;
    }

    &:focus {
        outline: 2px solid #93c5fd;
    }
}

Gecompileerde CSS:

.btn {
    background-color: #2563eb;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
}

.btn:hover {
    background-color: #1d4ed8;
}

.btn:focus {
    outline: 2px solid #93c5fd;
}

Tip: De & moet zonder spatie voor de dubbele punt staan (&:hover). Zet je wel een spatie (& :hover), dan zoekt SCSS naar een kind-element binnen de knop dat gehoverd wordt!

---

3. Toepassing 2: SCSS in combinatie met BEM

De BEM-methode (Block, Element, Modifier) is de standaard in de grafische en front-end sector om CSS-klassen helder te structureren:

• Block: Het losstaande component (bijv. .card)
• Element: Een onderdeel van het component (bijv. .card__title of .card__img)
• Modifier: Een variant of status van het component (bijv. .card--featured of .card__title--large)

Dankzij het &-teken kun je in SCSS de klassenamen van BEM aan elkaar plakken!

SCSS Code (Slimme BEM-structuur):

.card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 1.5rem;

    // Plakt '__title' achter '.card' -> .card__title
    &__title {
        font-size: 1.25rem;
        color: #1f2937;
    }

    // Plakt '__button' achter '.card' -> .card__button
    &__button {
        display: inline-block;
        margin-top: 1rem;
    }

    // Plakt '--featured' achter '.card' -> .card--featured
    &--featured {
        border-color: #f59e0b;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}

Gecompileerde CSS:

.card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
}

.card__title {
    font-size: 1.25rem;
    color: #1f2937;
}

.card__button {
    display: inline-block;
    margin-top: 1rem;
}

.card--featured {
    border-color: #f59e0b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

Belangrijke regel: Nesting maakt je SCSS heel overzichtelijk, maar sla er niet in door! Volg de Inception-regel: nest nooit dieper dan 3 niveaus. Hoe dieper je nest, hoe specifieker en zwaarder de uiteindelijke CSS wordt.

---

4. Praktijkvoorbeeld: Een Complete Card Component

Laten we BEM, HTML en SCSS met de &-operator nu eens samenbrengen in een realistisch component.

HTML Structuur:

<article class="product-card product-card--sale">
    <img src="images/schoen.jpg" alt="Sneaker" class="product-card__image">
    <div class="product-card__body">
        <h3 class="product-card__title">Retro Sneaker</h3>
        <p class="product-card__price">€ 89,99</p>
        <button class="product-card__btn">In winkelmand</button>
    </div>
</article>

SCSS Structuur met &:

$color-primary: #10b981;
$color-sale: #ef4444;

.product-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    max-width: 300px;
    transition: transform 0.2s ease;

    &:hover {
        transform: translateY(-5px);
    }

    &__image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    &__body {
        padding: 1rem;
    }

    &__title {
        font-size: 1.1rem;
        margin: 0 0 0.5rem 0;
    }

    &__price {
        font-weight: bold;
        color: $color-primary;
    }

    &__btn {
        width: 100%;
        padding: 0.5rem;
        background-color: $color-primary;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
            opacity: 0.9;
        }
    }

    // Modifier voor uitverkoop
    &--sale {
        border: 2px solid $color-sale;

        .product-card__price {
            color: $color-sale;
        }
    }
}

---

5. Oefening: Bouw een BEM Profile Badge

In deze opdracht ga je de Parent Selector (&) in SCSS toepassen om een profielkaartje (Profile Badge) te bouwen volgens de BEM-structuur.

Stappenplan

1. Maak een HTML-bestand en een SCSS-bestand aan (style.scss).
2. Schrijf de HTML-structuur voor een profielkaartje met de volgende BEM-klassen:

• Block: .profile-card
• Elements: .profile-card__avatar, .profile-card__name, .profile-card__role, .profile-card__btn
• Modifier: .profile-card--pro (voor een premium/pro account)

3. Open je SCSS-bestand en koppel al deze elementen binnenin het hoofdblok .profile-card met behulp van de parent selector & (dus &__avatar, &__name, etc.).

1. Voeg aan de knop (&__btn) een :hover-status toe met &:hover.
2. Geef de modifier &--pro een opvallende rand- of achtergrondkleur.
3. Compileer je SCSS-bestand en bekijk het resultaat in de browser.

Verwachte Output

Een strak vormgegeven profielkaartje waarvan de volledige styling in SCSS is opgebouwd vanuit één enkel hoofdblok (.profile-card) met behulp van de &-operator.