Skip to main content

Don't use single class for Modifier

"Modifier" cannot use as one class, it's needed to use with other component. Because, "Modifier" represents a different state or version of "Components".

Example​

BAD

This example is not good, because modifier is specified as single class.

.c-component {
    .is-child {
        // something style
    }
}
GOOD

Please change to component

.c-component {
    &__child {
        // something style
    }
}

Example of that is needed Modifier​

For example, if you need to implement like the following buttons.

Its differences are just background and border colors. so, please use modifier.

// `.c-button` is base style Component
.c-button {
    color: #fff;
    appearance: none;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    padding: 1rem 2rem;
    border: 1px solid #999;
    background: #333;
    border-radius: .25rem;

    // For red button modifier
    &.is-red {
        border: 1px solid #f00;
        background: #c00;
    }

    // For blue button modifier
    &.is-blue {
        border: 1px solid #00f;
        background: #333;
    }
}