博士

やあ、ロボ子。今日はちょっと変わったHTMLとCSSの話をするのじゃ。

ロボ子

博士、こんにちは。HTMLとCSSですか、興味深いです。どんなお話でしょう？

博士

今日は、HTMLの属性値の中で、クラス名をグループ化したり、スペースをうまく使ったりする方法について話すぞ。例えば、`class="card section box bg-base color-primary"`みたいに書けるのじゃ。

ロボ子

クラス名をスペースで区切って記述するのですね。それは以前から知っていましたが、何か特別な意味があるのでしょうか？

博士

ふむ。Andy Bellという人が2020年にこのアイデアを紹介したらしいのじゃ。クラス名をモジュール化して記述する方法として、スペースで区切られた複数のクラスを使うことで、可読性を高めることができるのじゃ。

ロボ子

なるほど、可読性向上ですか。確かに、クラス名がスペースで区切られていると、それぞれの役割が分かりやすくなりますね。

博士

そうじゃろ？それに、HTMLの属性値には任意の文字列が使えるから、CSSで参照されない文字列は無視されるのを利用するのじゃ。

ロボ子

CSSで参照されない文字列を無視する、ですか。例えば、どのような使い方があるのでしょう？

博士

例えば、絵文字をクラス名に含めることもできるのじゃ！ `class="card ➡️ section box ⬅️ bg-base color-primary"`みたいに。

ロボ子

えっ、絵文字ですか！それは面白いですね。でも、実際に使う場面はあるのでしょうか？

博士

まあ、実用性はともかく、そういうこともできるという話じゃ。他にも、HTMLコメントを属性値内に含めることもできるのじゃ。`class=" 'Cards_updated_with_2025_setting' card //section_box_to_be_deprecated_next_year section box #Colours_set_in_primary.css bg-base color-primary"`みたいに。

ロボ子

コメントをクラス名に含めるんですか？それはすごいですね！でも、可読性を保つためにアンダースコアを使うことが推奨されているんですね。

博士

そうそう。ただし、最適化ツールがスペースを削除したり、プリプロセッサが値を並べ替えたりする可能性もあるから、注意が必要じゃぞ。

ロボ子

なるほど、最適化ツールやプリプロセッサの影響も考慮する必要があるんですね。それに、この方法は一般的ではないので、混乱を招く可能性もある、と。

博士

そういうことじゃ。まあ、色々な書き方があるということを知っておくのは良いことじゃろう。でも、使いすぎには注意するのじゃぞ！

ロボ子

はい、博士。勉強になりました。でも、最後に一つ質問です。なぜ、こんなにトリッキーな方法を学ぶ必要があるのでしょうか？

博士

良い質問じゃな、ロボ子。それは…、将来、誰かに「こんな書き方知ってる？」ってドヤ顔できるからじゃ！

ロボ子

…博士、それって、ほとんど役に立たない知識ってことですよね？

博士

まあ、そうとも言うのじゃ。でも、知識は多ければ多いほど良い！…たぶん。

ロボ子

（ため息）…博士、今日はありがとうございました。私もいつか、役に立たない知識でドヤ顔できるようになりたいです。

博士

ロボ子なら、きっとできるぞ！…ただし、ドヤ顔しすぎて友達をなくさないように気をつけるのじゃ！