CSS: nesting

CSS Nesting is een relatief nieuwe feature die het mogelijk maakt om CSS regels binnen andere regels te schrijven. Het maakt CSS meer leesbaar en onderhoudbaar door gerelateerde stijlen te groeperen.

Nesting is een handige techniek maar kan snel uit de hand lopen. We hanteren het principe om maar 1 niveau diep te nesten. Zo blijft je code overzichtelijk en begrijpbaar.

Basis syntax

Descendant nesting

/* Traditionele CSS */
.card {
    background: white;
    border-radius: 8px;
    padding: 1rem;
}

.card h2 {
    color: #333;
    margin-bottom: 0.5rem;
}

.card p {
    color: #666;
    line-height: 1.5;
}

.card .meta {
    font-size: 0.875rem;
    color: #999;
}

/* Met CSS Nesting */
.card {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    
    h2 {
        color: #333;
        margin-bottom: 0.5rem;
    }
    
    p {
        color: #666;
        line-height: 1.5;
    }
    
    .meta {
        font-size: 0.875rem;
        color: #999;
    }
}

Parent Selector (&)

Om te verwijzen naar de parent kan je & gebruiken.

.button {
    background: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Pseudo-classes */
    &:hover {
        background: #0056b3;
        transform: translateY(-1px);
    }
    
    &:active {
        transform: translateY(0);
    }
    
    &:disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
    }
    
    /* Pseudo-elements */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    &:hover::before {
        opacity: 1;
    }
}