javascriptのid名クラス名の良いつけ方悪いつけ方はcssとどう違いますか？

Question

javascriptのid名クラス名の良いつけ方悪いつけ方はcssとどう違いますか？

https://webkikaku.co.jp/blog/htmlcss/idclassname/
cssはこのように情報がいくらでもありますが、jsはほとんどありません。

・１ 機能別に分離して、マルチクラスにする、js-sectionのように一つにしない、
jsの名前は要素の役割でつけず、jsの機能でつける

<div id="js-slide" class="js-light-box js-animation section">

・２ 機能別に分離して、マルチクラスにする、js-sectionのように一つにしない
jsの名前は要素の役割でつける

<div id="js-section" class="section">

おそらく1だと思うのですが、できるだけIDを使い（重いものを優先して使う？）やはりjsの機能分、クラス名だらけになっても分離したほうがいいでしょうか？
そうでないと名前が付けにくいし、削除すると意図しないものまで影響を与えるので。
ただクラス名だらけになるけど仕方がないですよね。

下記のような方法もありますが、$(".js-heigh-get--more-tablet").height(parentHeight);はおかしいですよね。
.js-size-ajasment--more-tabletというクラス名にしてjs-heigh-get--more-tabletとマルチクラスにするのがいいのですかね？
やっぱりクラス名だらけになるのですが

<div id="slide" class="split-screen-inner-secondly js-heigh-get--more-tablet">

$(window).load(function(){
	var parentHeight = $('.js-heigh-get--sp').height();
	if($(window).width() < 768) {
		$(".js-heigh-get--more-tablet").height(parentHeight);
	}
});

//ある要素の高さをある要素と同じ高さにする-768以上
$(window).load(function(){
	var parentHeight = $('.js-heigh-get--more-tablet').height();
	if($(window).width() > 768) {
		  $(".js-heigh-get--more-tablet").height(parentHeight);
	}
});

Answer 1

ID名やクラス名のつけ方はCSSと基本的に変わらないと思います。HTMLの文書、要素、部品、オブジェクトに対して体裁を与えるものがCSSで、同じくHTMLの文書、要素、部品、オブジェクトに対して操作、処理、動作、機能を与えるものがJavaScriptと考えています。CSSが色、大きさ、装飾などをHTMLから分離したように、JavaScriptが処理や機能をHTMLから分離するべきと思います。

よって、ID名やクラス名も処理や機能から分離された、あくまで、HTMLの文書、要素、部品、オブジェクト、役割に沿った命名法が良いと思います。つまり、HTML、その中に含まれるID名やクラス名は名詞的なもので、動詞的なJavaScriptによる処理とは明確に区別した方が良いと私は思います。

おっしゃるように、JSの機能ごとにクラス名を分けると、クラス名だらけになるばかりではなく、JSの実装方法が変わるごとに名前を付け変えなければならず、保守効率が良いと言えません。ですから、JSのメソッド名のようなID名やクラス名は慎んだ方が良いと私は思います。

Comments

[退会済みユーザー]

ありがとうございます。

・１ 機能別に分離して、マルチクラスにする、js-sectionのように一つにしない、
jsの名前は要素の役割でつけず、jsの機能でつける
<div id="js-slide" class="js-light-box js-animation section">

・２ 機能別に分離して、マルチクラスにする、js-sectionのように一つにしない
jsの名前は要素の役割でつける

<div id="js-section" class="section">

上記だと2番のほうを採用するのですね。id="js-section" class="section">
という形ですね。

[naomi3]

ID名やクラス名は要素の役割でつけ、機能別につけることはよろしくない、と申し上げたかったのですが。

[退会済みユーザー]

機能別が良くないとは
<div id="js-slide" class="js-light-box js-animation
のことではないのですか？

要素の役割が下記ではないのですが？
<div id="js-section" class="section">

違う場合は具体的なクラス名の例を教えてもらえるとありがたいです。

[naomi3]

私なら、slider, light-box, animated, sectionなど、名詞、名詞句、名詞に準じるものを使います。

[退会済みユーザー]

機能別が良くないとは
<div id="js-slide" class="js-light-box js-animation
のことではないのですか？

要素の役割が下記ではないのですが？
<div id="js-section" class="section">

の認識ではなく

slider, light-box, animated, sectionがすべて要素の役割という考えなのですね。
slider, light-boxはJSの機能と私は思いましたが、

[naomi3]

<div id="js-slide" class="js-light-box js-animation に対応するJSもHTML全体もわからない状況で、わかる範囲でお答えしました。

命名法は、ご自身のプロジェクトでお決めになると良いのですが、「id名クラス名の良いつけ方悪いつけ方」についてのご質問でしたので、私見を述べさせていただきました。

[退会済みユーザー]

ありがとうございました。