BEMの命名規則などメモ

最初はnameをlinkの外で定義していたが、BEMの命名規則を利用して親子や兄弟関係を明確に示す

• .link:hover の中に .link__name のスタイルをネストさせることで、.link がhover状態の際に適用される .link__name のスタイルを明示的に示す

• &__name の部分で & を使って .link の子要素である .link__name を示し、 .linkと .link__name の関係を明確にする

no-descending-specificity のルールに従う

• &__nameを .link__name の前に置くことで、スタイルの上書きや意図しないスタイルの適用を防ぐ

変数を使う

• スタイルの変更時に書き換える箇所が減り、意図しないスタイルの適用を防ぐ

<template>
  <div :class="$style.link">
    <img :src="imageUrl" :class="$style.image" />
    <p :class="$style.link__name">omegaさん</p>
  </div>
</template>

<script> ... </script>

<style lang="scss" module>
.link {
  ...

  &__name {
    color: blue;
  }

  &:hover {
    text-decoration: none;

    .link__name {
      color: red;
    }
  }
}

.image {
  $size: 30px;

  width: $size;
  height: $size;
  border-radius: $size;
}
</style>