0

aタグのホバー効果などたくさんの要素につける場合、拡張性などを考えて、マルチクラスにしますか?
それともあまりにクラス名が多くなるのでタグ名で指定しますか?

・1
a:hover {}

・2
.animation:hover {}

今はできるだけタグ名は使わずにクラスを使うということなのでそのようにしているのですが、
下記のようになってしまうところが出てきますが、こんなにあっても問題ないと思いますか?

<div class="c-card c-card--margin-bottom u-gradient-lightgreen u-boxshadow-small js-hook-animation-fadein--scroll-long u-transition-all-500ms p-is-hidden">

1 件の回答 1

1

全体像がわからないので一般的な話になりますが、

  1. ページ全体に適応するのであれば、直接要素に
    CSS:

    a:hover {}
    
  2. ある特定の区切られた範囲の中であれば、その部分を囲む要素にid(ナビゲーションバーなどページに1つしかないもの)またはclass(複数散らばってあるもの)をつけて
    HTML:

    <ul id="nav>
        <li><a>Home</a></li>
        <li><a>Download</a></li>
    </ul>
    

    CSS:

    ul#nav a:hover {}
    
  3. 特に規則性がなく散らばっている場合はaに直接classを付けて
    CSS:

    a.animation:hover {}
    

という感じに自分はしてます。

どのようなサイトかわからないので的外れかもしれませんが、animationやscrollなど動きでclassを指定するのではなく、「ヘッダー」や「アルバム画像」などサイトでの役割でclassを分けるのが普通だと思います。「アルバム画像」は全て同じような見た目や動きをするでしょうが、「ナビゲーションバー」がそれと同じであることはあまり無いので。

処理量だけの話であれば、今時のパソコンやスマホであればクラス数十個までは誤差だと思うので、本当に必要であれば多いこと自体は問題は無いと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。