質問: ### 前提・実現したいこと Bootstrap4 HTML5 Bootstrap4を学習しているのですが、 Style制御のユーティリティは使うべきなのでしょうか? Bootstrap3は軽く利用経験有です。 ### ユーティリティの何に引っかかっているか1 HTMLとCSSを分ける理由について、私は以下のように学校で習いました。 「HTMLは文書を記述する為の言語として生まれたが、Webページの発展により文書と関係ないタグが増えてしまった。 その代表がであった為、デザインは別言語、つまりスタイルシートに記述することになった。」 この理論でいうと、Style制御のユーティリティは使うべきではない気がしています。 ### ユーティリティの何に引っかかっているか2 また、ユーティリティーを使った場合、同じ記述が増えてしまう気がしています。 例えば、メニューバーの文字を白にしたい場合、 以下のソースを見ると、aタグのクラスに「text-white」と繰り返しかかれています。 スタイルシートにで「.nav-link」にまとめて「color: white;」を指定すれば記述は1回で済みますし、Saasも使えます。 ``` Home How to Use Contact Login ``` style制御のユーティリティを使うべきか?使わないべきか? また、理由を添えてお答え頂けると幸いです。 よろしくお願い致します。
回答: > > ユーリリティの何に引っかかっているか1 > > > これは、「ユーティリティを使うべきではないこと」の理由にはなっていない気がしますが、いかがでしょうか? `font要素`のような**文書構造と関係のない要素が、文書構造を定義できる要素の代わりに使われる**ことと、**文書構造に影響を与えない装飾が、セマンティックな要素に付与されている**ということでは、まったく意味が違うと思います。前者の場合、文書構造とデザインの分離は行えていませんが、後者では実現できていませんか? > > ユーリリティの何に引っかかっているか2 > > > `Bootstrap`のユーティリティクラスをみると、機能的に分割されていて、単一のプロパティしか持たないものがほとんどだとわかると思います。 上記の特性から、ユーティリティクラスを使う場合、目的のデザインを実現するために多くのクラスを`class属性`に持たせることになります。ですが、その代わりに、様々な恩恵が期待できます。 たとえば、質問文のコードで「`nav-linkクラス`が付与されている、ある要素だけの文字色を変更したい」というときに、文字色を含めたすべてのスタイルを`nav-linkクラス`内に書いた場合は、CSSに追加の記述が必要で、もし他にも文字色を変更したい要素があった場合は、この作業を他の要素にも行う必要があります。しかし、文字色の設定として`text-whiteクラス`が付与されている場合、それを`text-redクラス`に変更すれば良いだけです。これは、機能的に分割された、複数のクラスで要素の装飾を行うことで、**CSSの記述量が減少**し、**スタイルの変更が容易になった**ことを意味しています。 しかし、何でもユーティリティクラスで行って、`class属性`に付与するクラス名が増えてくると、`class属性`の管理が面倒になります。そして、`Bootstrap`のユーティリティクラスを使うだけではなく、独自のCSSを書き始めたら、ますます管理が面倒になってしまいます。これに加えて、「このユーティリティクラスを付与したら、この独自クラスも付与しておくこと」のように、クラス間で依存関係ができると、さらに面倒なことになってしまうかもしれません。 というわけで、ちょっとスタイルを変更したい要素には、独自クラスに加えてユーティリティクラスを使ったりして、ユーティリティクラスの利点をある程度活かしつつ、`Sass`などを使い共通しているスタイルは共通化していく、というのも良いと思います。