スキルメーターの要素は何が最適か？（div以外）

問題

スキルメーターです。とてもdivdivしてしまいました。

管理やCSS指定がしにくいので、せめて【 .dataと.tool 】と【 .Illustrator .Photoshop .Indesign… 】を分けたいです。
各、どの要素が最適でしょうか？

ちなみに、【】ごとに違う効果を適用させたいので、要素名が同じでなければ良いです。
全てflexbox使ってます。

例）
.　.data　.tool　.Illustrator…
⭕️ div×div×figure　　　　（.dataと.toolは一緒でもいい）
⭕️ article×section×div　　（もちろん全部違ってもいい）
❌ div×div×div　　　　　（全部一緒はだめ）

仕上がりイメージ

候補

Illustrator…の所を<figure> <figcaption>
Illustrator…の所を<ul> <li>
dataを<article>、toolとcodeを<section>　（toolと同じ階層にcodeもあります）

他、何か良い案ありましたら募集

どれがいいでしょうか？　よろしくお願いします。

コード

html
1<div class="left">
2  <section class="skill">
3    <p class="title">skill</p>
4    <div class="data">
5      <div class="tool">
6        <div class="Illustrator">
7          <img class="mater" src="img/4.svg" alt="advanced" />
8          <img class="mater-t" src="img/Ai.svg" alt="Illustrator" />
9          <p>Illustrator</p>
10        </div>
11        <div class="Photoshop">
12          <img class="mater" src="img/3.svg" alt="intermediate" />
13          <img class="mater-t" src="img/Ps.svg" alt="Photoshop" />
14          <p>Photoshop</p>
15        </div>
16        <div class="Indesign">
17          <img class="mater" src="img/2.svg" alt="elementary" />
18          <img class="mater-t" src="img/Id.svg" alt="Indesign" />
19          <p>Indesign</p>
20        </div>
21        <div class="Vectorworks">
22          <img class="mater" src="img/3.svg" alt="intermediate" />
23          <img class="mater-t" src="img/Vw.svg" alt="Vectorworks" />
24          <p>Vectorworks</p>
25        </div>
26        <div class="Shade">
27          <img class="mater" src="img/3.svg" alt="intermediate" />
28          <img class="mater-t" src="img/Sd.svg" alt="Shade" />
29          <p>Shade</p>
30        </div>
31      </div>　<!-- /tool -->
32      <div class="code">
33        <div class="HTML">
34          <img class="mater" src="img/2.svg" alt="elementary" />
35          <img class="mater-t" src="img/HTML.svg" alt="HTML" />
36          <p>HTML</p>
37        </div>
38        <div class="CSS">
39          <img class="mater" src="img/2.svg" alt="elementary" />
40          <img class="mater-t" src="img/CSS.svg" alt="CSS" />
41          <p>CSS</p>
42        </div>
43        <div class="Javascript">
44          <img class="mater" src="img/1.svg" alt="beginner" />
45          <img class="mater-t" src="img/JS.svg" alt="Javascript" />
46          <p>Javascript</p>
47        </div>
48        <div class="PHP">
49          <img class="mater" src="img/1.svg" alt="beginner" />
50          <img class="mater-t" src="img/PHP.svg" alt="PHP" />
51          <p>PHP</p>
52        </div>
53      </div>　<!-- /code -->
54    </div>　<!-- /data -->
55  </section>　<!-- /skill -->
56</div>　<!-- /left -->

kszk311

2019/02/18 16:07

問題としているコードは、画像ではなく「```」で囲むか<code>ボタンを用いて質問文に記載してください。

EXIT

2019/02/18 16:19

この質問ならコードをコピーする必要がないし、色付きのコードの方がわかりやすいかなと思って…

kszk311

2019/02/18 16:31

コードは、マークダウンで書けばハイライトされます（色がつきます）。コードで具体例を示しながら、説明がしやすくなると思いますので、特に理由がなければできるだけコードを記載された方が良いかと。

EXIT

2019/02/19 06:39

なるほどです！

行動規範の内容に同意します

回答3件

管理やCSS指定がしにくいので

クラス名管理の話ならわかりますが、なぜ要素名がdivだと管理しにくくなるのでしょうか？
基本的に現代におけるCSSはクラス名・id名で管理するものと思っております。

SCSSを使えるならBEM命名が使えますし、素のCSSだけだとしてもクラス名が適切に設計されていれば問題ないかと思いますが、いかがでしょう？

投稿2019/02/18 15:41

yu-smc

総合スコア610

EXIT

2019/02/18 16:17

Illustrator、Photoshop…の所を一括で指定したり、「dataとtoolはこの効果付けない」みたいな使い方しようと思って… おー、BEM命名なんてあるんですね！ .data__tool、.data__itemとかでまとめれるんだ〜！ただ、『.PHPの.mater-tの幅だけ変えたい』みたいな個別に変えたい所があるんですが、どうやればそういうのもやりやすいですかね？

yu-smc

2019/02/19 01:30 編集

私の場合は個別に変えたい部分はもう一個分かりやすいクラス名をつけて対応することが多いですかね～、最初の頃は記述が長くなって慣れなかったんですが、段々このほうがあとあとメンテもしやすくていいなとなり採用しています。コメントいただいた、.PHPの.mater-tの幅だけ変えたいということに関してはそこだけにかかるCSSを作れば済む気もします。CSSの優先順位について理解すると結構作りやすくなります！

EXIT

2019/02/19 06:54

そうなんですね！あ、:last-childとかですかね。おーありがとうございます！

行動規範の内容に同意します