Bootstrapテンプレートclass なのか判別する方法はある？

Question

背景

例えば、作成サイト内にジャンボトロンを入れたい場合、

<div class="jumbotron"> のように書いたりしますが、これだと自動的に jumbotronテンプレートが採用されますよね。

・良い点：コード量が少なくなり楽。
・悪い点：テンプレートでない独自のジャンボトロンをサイトに入れる目的で、且つ class="jumbotron" がテンプレートであることを知らなかった場合、自分が意図しないデザインになってしまう。

全てのテンプレートの存在を事前に認識できていれば上記の「悪い点」は起こらないのでしょう。ただ、僕は全てのテンプレートを覚えたくありません。
というわけで、

###質問１．Bootstrap を使用した CSS 内の class が、Bootstrapテンプレートclass なのかどうか判別したいのですが、判別する方法はあるのでしょうか？

###質問２．判別する方法が無いのであれば、良い対処法はありますでしょうか？（「全てのテンプレートを覚える」、もしくは「テンプレートが発生してるっぽかったらその都度確認する」しか無いのでしょうか？）

（´-`）.｡o｛理想：入力した class が Bootstrap専用class だった場合その class をハイライトしてくれる、Atom か VSCode のパッケージ）

お答えいただけたら幸いです。
宜しくお願い致します！

Bootstrap, CSS

Answer 1

ブラウザの開発ツールから見ると該当のクラスがどのファイルに書かれているか分かるのでそこから判断するくらいでしょうか。

ちなみに、
「別のファイルに同じ指定があった場合」下記のようになります。

PHPやJavaなどクラス・メソッドなど所属が明示されるプログラムならまだしも
CSSはそういうプログラミング言語とはまた違うものですので、これくらいが限界とは思います。
（同名定義でエラーがでるとかではないあくまで基本はあと勝ち）

ということで「基本はあと勝ち」という原則のもと、コード内検索で対応するしかないように思います。
検索で見つけられるので覚える必要はありません。
むしろCSSフレームワークであればMATERIAL CSSのようにクラスには必ず接頭辞がつくネーミングルールのあるものもありますし、
「衝突を避けたい」のが目的であれば既に回答があるようにBootstrapのように接頭辞のないネーミングが採用されているCSSフレームワークを避けるのも1つの手です。

個人的には「もし名前が衝突してレイアウトの影響があるようなことがあれば自分で作ったクラスの名前変えればいいじゃん」と思います。

Comments

[JunichiTanaka]

詳しいご回答ありがとうございます！

>『CSSはそういうプログラミング言語とはまた違うものですので、これくらいが限界とは思います。』
なるほど・・そうなんですね。

>『CSSフレームワークであればMATERIAL CSSのようにクラスには必ず接頭辞がつくネーミングルールのあるものもあります』
少し確認してみたのですが、以下の２言語のようなフレームワークのことですかね。見てみます！
- Material Design for Bootstrap（ https://fezvrasta.github.io/bootstrap-material-design/ ）
- Materialize（ https://materializecss.com/ ）

>『個人的には「もし名前が衝突してレイアウトの影響があるようなことがあれば自分で作ったクラスの名前変えればいいじゃん」と思います。』
いちいち対応するよりも最初から「これは Bootstrapテンプレートclass でっせ」と表示してくれるパッケージや方法があれば効率的だと思うので、何か存在するのではと思い質問させて頂きました。衝突すること自体レアなのだろうなとは予想してはいますが。

ご回答ありがとうございました！

[m.ts10806]

>２言語のようなフレームワークのことですかね。
そもそも「言語」ではないです・・。
「接頭辞」とは「命名の際に必ず頭につける定型文言」のことをさします。
BootstrapもMaterializeもCSSクラスの命名に接頭辞は採用されていませんので違います。
例えば下記です。
https://getmdl.io/
https://www.muicss.com/
クラスの頭に必ず「mdl-」「mui-」とつくようになっています。
これによって「このフレームワークのクラスである」と一目でわかるようになっています。

>「これは Bootstrapテンプレートclass でっせ」
結局それは「ブラウザのデベロッパーツールの解析機能と同等のもの」ということになります。
であればデベロッパーツールでいいよね、という風になりますし、画面表示してようやくCSSは効果を発揮する、HTML必須なので、デベロッパーツールが成り立ってるとも言えます。

Answer 2

僕は全てのテンプレートを覚えたくありません。

「チートシート」等で検索して、必要な部分だけで良いのでは？
それも嫌なら、Bootstrap自体を使用しないことです。

Comments

[m.ts10806]

なんでしょう。両方の回答につけられた低評価３。
理由書かなくてもわかるような内容の回答ではないとは思うんですけどね・・

[yoshinavi]

うーん。何でしょうかね？
高評価・低評価のシステムはあっても良いのですが、気持ちの上では理由を聞きたいと思いますね。

過去の質問・回答等による言論等に基づく「好き・嫌い」の「好みの問題」ならば、どうしようもありませんが、技術論的な間違いの指摘であれば、改善・向上は出来ますからね。

個人的には、自分の不注意による発言や知識不足による低評価は反省しますが、それ以外は、あまり気にしないようにしています。
特に反論コメントの無い低評価は「愉快犯」と勝手に決めつけています。
(^^)

[m.ts10806]

私も同じです。
技術的に問題ありならきっちり否定してほしいですしそこから勉強になるとも思います。
ただ複数の愉快犯となると決して気持ちのいいものではないですからね…。不純だなあとは思います。