Bootstrap4のStyle制御のユーティリティについて

前提・実現したいこと

Bootstrap4
HTML5

Bootstrap4を学習しているのですが、
Style制御のユーティリティは使うべきなのでしょうか？

Bootstrap3は軽く利用経験有です。

ユーティリティの何に引っかかっているか①

HTMLとCSSを分ける理由について、私は以下のように学校で習いました。

「HTMLは文書を記述する為の言語として生まれたが、Webページの発展により文書と関係ないタグが増えてしまった。
その代表が<font>であった為、デザインは別言語、つまりスタイルシートに記述することになった。」

この理論でいうと、Style制御のユーティリティは使うべきではない気がしています。

ユーティリティの何に引っかかっているか②

また、ユーティリティーを使った場合、同じ記述が増えてしまう気がしています。

例えば、メニューバーの文字を白にしたい場合、
以下のソースを見ると、aタグのクラスに「text-white」と繰り返しかかれています。

スタイルシートにで「.nav-link」にまとめて「color: white;」を指定すれば記述は１回で済みますし、Saasも使えます。

<div class="container-fluid">
    <div class="row" id="header">
        <div class="col-lg-2" >
            <img src="img/logo6.png" alt="肉Mapロゴ" class="w-100" />
        </div>
        <div class="col-lg-10" >
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link text-white active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">How to Use</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white" href="#">Login</a>
                </li>
            </ul>
        </div>
    </div>
</div>

style制御のユーティリティを使うべきか？使わないべきか？
また、理由を添えてお答え頂けると幸いです。

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

ユーリリティの何に引っかかっているか①

これは、「ユーティリティを使うべきではないこと」の理由にはなっていない気がしますが、いかがでしょうか？
font要素のような文書構造と関係のない要素が、文書構造を定義できる要素の代わりに使われることと、文書構造に影響を与えない装飾が、セマンティックな要素に付与されているということでは、まったく意味が違うと思います。前者の場合、文書構造とデザインの分離は行えていませんが、後者では実現できていませんか？

ユーリリティの何に引っかかっているか②

Bootstrapのユーティリティクラスをみると、機能的に分割されていて、単一のプロパティしか持たないものがほとんどだとわかると思います。
上記の特性から、ユーティリティクラスを使う場合、目的のデザインを実現するために多くのクラスをclass属性に持たせることになります。ですが、その代わりに、様々な恩恵が期待できます。
たとえば、質問文のコードで「nav-linkクラスが付与されている、ある要素だけの文字色を変更したい」というときに、文字色を含めたすべてのスタイルをnav-linkクラス内に書いた場合は、CSSに追加の記述が必要で、もし他にも文字色を変更したい要素があった場合は、この作業を他の要素にも行う必要があります。しかし、文字色の設定としてtext-whiteクラスが付与されている場合、それをtext-redクラスに変更すれば良いだけです。これは、機能的に分割された、複数のクラスで要素の装飾を行うことで、CSSの記述量が減少し、スタイルの変更が容易になったことを意味しています。
しかし、何でもユーティリティクラスで行って、class属性に付与するクラス名が増えてくると、class属性の管理が面倒になります。そして、Bootstrapのユーティリティクラスを使うだけではなく、独自のCSSを書き始めたら、ますます管理が面倒になってしまいます。これに加えて、「このユーティリティクラスを付与したら、この独自クラスも付与しておくこと」のように、クラス間で依存関係ができると、さらに面倒なことになってしまうかもしれません。
というわけで、ちょっとスタイルを変更したい要素には、独自クラスに加えてユーティリティクラスを使ったりして、ユーティリティクラスの利点をある程度活かしつつ、Sassなどを使い共通しているスタイルは共通化していく、というのも良いと思います。