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