

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

・１  
a:hover {}

・２  
.animation:hover {}

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

[code]

    <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">
    
[/code]


CC BY-SA 3.0
2016-11-26T05:06:51.950
30679
2016-12-04T16:07:52.053
14320
question
css
aタグのホバー効果などたくさんの要素につける場合、拡張性などを考えて、マルチクラスにしますか？


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

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

[code]     a:hover {}

    
[/code]

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

[code]     <ul id="nav>

        <li><a>Home</a></li>
        <li><a>Download</a></li>
    </ul>
    
[/code]

CSS:

[code]     ul#nav a:hover {}

    
[/code]

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

[code]     a.animation:hover {}

    
[/code]

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

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

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


CC BY-SA 3.0
2016-12-04T16:07:52.053
30896
2016-12-04T16:07:52.053
3974
30679
answer