CSS-Classes

Naming

CSS classes should always be in kebab-case.

Caveats

When dynamic classes with Vue it is important to explicitly write the css-class in kebab-case, even when the variable used is not in kebab-case (see example below). This prevents inconsistencies.

<template>
    <div
        class="alert"
        :class="{
            'is-open': isOpen,
        }"
    >
        You have opened the element!
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    isOpen: boolean;
}>();
</script>

<style scoped lang="scss">
.alert {
    display: none;

    &.is-open {
        display: block;
    }
}
</style>