Bootstrap4のユーティリティとSassの使い分けについて

前提・実現したいこと

Bootstrap4を使って、レスポンシブなHPを作成しようと思っています。

ユーティリティとSassの使い分けについてまとめてみたのですが、
アドバイス「これはユーティリティで書くべき」「これはSassで書くべき」や、
私の理解に間違いがあるようでしたら、理由も含めて教えて頂くと幸いです。

Sass(ユーティリティ以外)で書くべき

・2ヵ所以上で共通のスタイル
(変数を利用するか、@mixinでまとめる)

・ユーティリティクラスがないスタイル
(ex)z-indexやfont-sizeなど

ユーティリティで書くべき

・レイアウトの定義

・共通しないスタイル(1ヵ所でしか使わないスタイル)でユーティリティクラスがあるもの

・共通するスタイルだが、特定の状況でスタイルを変更する場合
(ex)以下のコードのような4つのリンクがあり、最初は全て青色 → クリックしたリンクだけ白色にしたいとき、
クリックしたリンクのtext-blueクラスを、JavaScriptでtext-whiteクラスに変更する。

HTML
1<ul class="nav justify-content-end">
2　　　　<li class="nav-item">
3       　　　　<a class="nav-link text-blue" href="#">Home</a>
4       </li>
5       <li class="nav-item">
6              <a class="nav-link text-blue " href="#">How to Use</a>
7       </li>
8       <li class="nav-item">
9              <a class="nav-link text-blue " href="#">Contact</a>
10       </li>
11       <li class="nav-item">
12              <a class="nav-link text-blue " href="#">Login</a>
13       </li>
14</ul>

参考

・https://teratail.com/questions/135401#reply-205165
(ユーティリティの存在意義について、以前私が質問させていただいたもの)

・https://qiita.com/gamerinshaft/items/b7b5d645bd8b0a632288
(見出し「レイアウトを定義するSCSSは極力書かない」のところ)

以上、アドバイスよろしくお願い致します。

keisukeh

2018/07/19 07:52

Sassで書くべきというのがよくわからないのですが、ここで言われているSassというのはどういう機能を持ったスタイルの集まりのことを言われてますか？何が言いたいかと言うとユーティリティーもcssである以上sassでかけるし、、、ということなんですが伝わりますでしょうか？

pigton

2018/07/20 00:21

失礼致しました。ユーティリティ以外のSassという意味でした。修正致します。

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

回答1件

ベストアンサー

cssでのクラスの定義をどうするかのお話になるとは思いますが、
これに関してはいろいろなCSS設計という手法が模索、提案されておりますので
そのへんを参考にされるといいと思います。

「Sass(ユーティリティ以外)で書くべき」、「ユーティリティで書くべき」というのはそれぞれの主観が入ると思いますので解答するのが難しいところですが、
bootstrapの場合OOCSSという考え方がベースにあると思われますので
OOCSS＋SMACS（どういうスタイルをどこに書くかを定義しているもの）をもとに回答させていただきますと、

自分の場合
・ベース
・コンポーネント(モジュール)
・レイアウト
・ユーティリティ
・ページ
に分けて考えます。(ファイルも分けます)

■ ベース
reset css など、タグ全体にかかるスタイル

■ コンポーネント（モジュール）
ボタン、カード、リスト、カレンダーなどのサイトのUIに関するスタイル

■ レイアウト
グリッドやページのレイアウトに関わるスタイル(.row とか .col- など)

■ ユーティリティ
上記で設定した値の上書きやその他便利機能を書いたスタイル(font-size-, pt-, zi-m, pos-abs, text-center など)

■ ページ
各ページ固有のスタイル

これを踏まえて