意外と多い。
まぁこれは仕方ない。
似たような機能なら似たような命名になるのは避けられない。
しかしかと言ってclass名をちまちま変えていくわけにもいかない。
というか継承したものや子要素のものまで考慮すると抜けが出るのでちまちまやるという選択肢は無くなる。
きっと他にもこの現象に苦しんでる人は腐るほどいると思って検索するとlessとsassで回避できるとGoogle先生が教えてくれた。
そして私はlessを選んだ。
理由はコンパイルとか環境用意しなくても使えるから。
やり方は簡単
まずbootstrapから本体をダウンロードしてくる(customでもOK)
※もちろんbootstrap以外でもOK
bootstrap.css(bootstrap.min.cssでも可)を適当なエディターで開いて先頭と最後にタグ名を追加
(zeijaku.netなのでzeijakuタグを指定してみる)
zeijaku {
html{
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
途中省略
@media print {
.hidden-print {
display: none !important;
}
}
こんな感じで全体をzeijakuタグで囲う。
次にbootstrap.css(bootstrap.min.cssでも可)の拡張子をlessに変える。
bootstrap.less
bootstrap.min.less
基本的な準備はこれで完了。
bootstrapを使う際はだいたいみんなこんな風に埋め込むと思うけど
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
今回はこんな風に埋め込む
<link rel="stylesheet/less" type="text/css" href="css/bootstrap.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<script src="js/bootstrap.js"></script>
stylesheetをless指定してそのlessをうまいことやってくれるless.min.jsを読み込む。
このless.min.jsはhttp://lesscss.org/でも入手可能です。
この状態で以下のタグを続けて書いて確認してみる。
<button type="button" class="btn btn-default">Submit1</button>
<zeijaku>
<button type="button" class="btn btn-default">Submit2</button>
</zeijaku>
こう記載するとsubmit1は単なるボタンだが、submit2はbootstrapのボタンになる。
zeijakuタグで囲んだ部分のみにbootstrapを適用させることが出来るので、他のものと衝突することは無くなる。
lessの書き方を工夫すればzeijakuタグ無しで衝突を回避することも出来る。
ちなみに速度としては毎回変換にかかる秒数は20ミリ秒だったので体感出来るほどの差は感じられなかった。
もちろんコンパイルしていれば変換自体の時間やless.min.jsのローディング(これは初回にキャッシュしとけばいいけど)時間は不要となるがお手軽にやる分には十分な性能と利便性があると思う。
関連記事
