ページによって個数の違うリストのクラス名

Question

リストなどSPは二つだけにしたい。ないしはページによっては二つにしたいことがよくありますがクラス名をどうつけますか？

多いページ

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

少ないページ
SPは二つだけにしたい。ないしはページによっては二つにしたい。
すると数値がおかしくなる。

<ul>
	<li class="item1"></li>
	
	<li class="item5"></li>
</ul>

変数名ならlinkMapなど具体的な要素の内容を書いてしまいますが、
cssの場合拡張性を考えて、リンク先がMap出なくなった時のことを考えると見た目では付けることが出来ません。
役割が良いですが役割は他と同じただのリンクなのでlinkとすると同じクラス名になってしまいます。
abcにしても同じ問題が起きますよね。

いったいどうしたらいいでしょうか。

Comments

[kei344]

「二つ」は特定の要素を残す、ということでしょうか。それとも5件表示を2件表示のように件数が減ればよいのでしょうか。

[退会済みユーザー]

説明不足で恐縮です。「二つ」は特定の要素を残すという方が近いと思います。例えば一つ目はtoppageへのリンク二つ目はmap～というように遷移先が違うグローバルナビを想定しています。ページによってmapには飛べなくても良いが、どこどこには飛び出いと必要なリンクが変わっていきますよね。

Answer 1

item1などの連番でクラス名をつけている以上、セマンティックなクラス名やスタイル付けが必要とされていないと思われます。
質問の例で言うと、『リンク先がMapでなくなった時』であってもスタイル付けを変更する必要性がないということになるかと思います。もし必要であるならば、むしろ『リンク先がMapでなくなった時』のメンテナンス性を考えてセマンティックな命名にすべきです。

そういうわけで、item1などというクラス名をつけずに、itemでクラス名を統一してデザインし、仮にセマンティックなスタイル付けを要求された時に初めてセマンティックなクラス名をつけるのがよろしいのではないかと思います。

<ul>
    <li class="item primary-item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item primary-item link-map"></li>
</ul>

.item{
  /*共通スタイル*/
}
.primary-item{
  /*主要アイテム用スタイル*/
}
.link-map{
  /*セマンティックなスタイル*/
}

Comments

[退会済みユーザー]

確かにそのようなケースが多いですね始めと最後だけ必要になりますが、始めとサイトは内容が変わった時に、中身をすり替えればクラス名は代えずに済むので始めと最後だけ必要という事ですかね？

それともlastchildなどを使えばクラス名の心配はなくなるという事でしょうか？

primary-itemは素晴らしいクラス名だと思います。
ただあとはみんなsecondlyになってしまいますね。
よって他は、仕方ないのでそれだけ別のcssを当てたい時なmapなど見た目でつけてしまって、
場所や中身が変わった時にクラス名を変更するしかないですかね。

セマンティックなクラス名も限界か

[Lhankor_Mhy]

私は疑似クラスで問題ないと思いますが、構造依存のCSSを嫌う方もいますので、その場合には、さらに".last-item"などの命名を行えばいいのではないかと思いますよ。

[退会済みユーザー]

グローバルナビはそれでもんだなさそうですね。

Answer 2

消すほうを指定するとか。

<ul>
    <li class="item1"></li>
    <li class="item2 no-sp"></li>
    <li class="item3 no-sp"></li>
    <li class="item4 no-sp"></li>
    <li class="item5"></li>
</ul>

<ul class="type-a">
    <li class="item1"></li>
    <li class="item2 no-sp"></li>
    <li class="item3 no-sp"></li>
    <li class="item4 no-sp"></li>
    <li class="item5"></li>
</ul><!-- spかつ.type-a の場合 .no-sp を表示しない、とか -->

Comments

[退会済みユーザー]

<ul>
<li class="item1">トップ</li>
<li class="item2">マップ</li>
<li class="item3">問い合わせ</li>
<li class="item4">その他</li>
<li class="item5"></li>
</ul>
とあった場合、

SPは
<ul>
<li class="item1">トップ</li>
<li class="item4">その他</li>
<li class="item5"></li>
</ul>

となると数値がさすがにおかしいかなと思った次第です。

<ul>
<li class="top">トップ</li>
<li class="other">その他</li>
</ul>
とすればいいという方がいると思いますが、再利用性が下がりますよね。
その他が会社概要になった場合クラス名を変更しないといけない問題が起きます。

ベストプラクティスが思い当たりません。

もう再利用性は諦めて具体的にしてしまうか。
数値が空いていても順番通りになっていれば穴あきは許容するのか

それとも順番を示さないベストプラクティスがあるのか？
私には思い当たりがありません。

[kei344]

そもそも横並びのリストに個別のクラス名は必要ないのでは。

[退会済みユーザー]

確かにそのようなケースが多いですね始めと最後だけ必要になりますが、始めとサイトは内容が変わった時に、中身をすり替えればクラス名は代えずに済むので始めと最後だけ必要という事ですかね？

それともlastchildなどを使えばクラス名の心配はなくなるという事でしょうか？

[kei344]

クラスをつけるか、という部分は状況しだいです。特定する必要が有るものにだけ付ければよいと思います。
> 始めと最後だけ必要
ご自身で書いておられるとおり「:first-child」「:last-child」で処理すればよいとおもいます。

[退会済みユーザー]

了解しました。