SOC.md

Proper separation of concerns

Let's say you need to add a button to a subscription form.

The naive pee-your-pants way

<button style="background-color: red; width: 200px;">Subscribe</button>

Separation of concerns - part 1

<button class="big-red-button">Subscribe</button>

.big-red-button {
    background-color: red;
    width: 200px;
}

Making stuff generic with utility classes

<button class="button-danger button-large">Subscribe</button>

.button-danger {
    background-color: red;
}

.button-large {
    width: 200px;
}

Final

<button class="subscription-button">Subscribe</button>

Using custom property sets:

:root {
    --button-danger: {
        background-color: red;
    }
    
    --button-large: {
        width: 200px;
    }
}

.subscription-button {
    @apply: --button-danger;
    @apply: --button-large;
}

or using LESS syntax:

.button-danger () {
    background-color: red;
}

.button-large () {
    width: 200px;
}

.subscription-button {
    .button-danger;
    .button-large;
}

or