0

CSSの変数について

サイトの隙間はバラバラではなく数個に決まるので、
下記のように共通する隙間を変数にして、使えば隙間を増やしたいと思った時は、
下記だけを代えればすべて変更してくれるので、このようにするのがベストプラクティスだと思うのですが、このようにすると下の隙間だけの場合は良いのですが、上下左右にあるばあい、marginをいっぺんにかけない問題が起こると思うのですが、どう対処していますか?

--margin-medium--bottom: ;

またutilityを使うという方法もありますが、やはりマルチクラスが多くなりすぎるので変数の方が良いでしょうか?

3
  • 「上下左右にあるばあい、marginをいっぺんにかけない問題が起こる」とは具体的にどういう状況でしょうか。状況を簡潔に再現できるコードをご提示ください。
    – T.Sa
    Commented 2017年7月6日 5:58
  • 変数--margin-medium--bottomは、要素ABCで共通に使うがleft、rightなどはABCそれぞれ違うケースです Commented 2017年7月6日 6:00
  • margin:1vw 2vw var(--medium--bottom); 例えばこのように複数一括指定の中に変数を入れてしまう事も可能なのでしょうか? これが可能なら、このようにすれば問題解決です。 Commented 2017年7月13日 9:28

1 件の回答 1

2

質問が漠然としているため回答も粒度の細かいものは出せませんが、簡潔に回答をするとすれば、HTMLの構造も含めたCSS設計によって大きく異なります。

utilityという言葉がFLOCSSで用いられるような汎用クラスのことを指している場合、あくまでも「これだけで解決」するものではなく「合わないところは都度変更・上書きする」という大前提に基づいています。

また、そもそも論として変数でまとめることが目的ではありません。同じ値となる箇所をまとめるために変数を使うというのが正しいのではないでしょうか。

そのため、「上下左右にあるばあい、marginをいっぺんにかけない問題が起こる」というのであれば「そこで変数を使おうとするのが間違っていないか?」ということを考える必要があるかと思います。

2
  • 上下左右すべて同じ値でない場合は変数にすべきではないという事ですね。 ただそうすると下の隙間だけはサイズが共通する場合変数に入れないとそのご変更があった時下の隙間のCSSの値をすべて置換しないといけないですよね Commented 2017年7月6日 7:12
  • 使い方によります。変数の使い方というよりもスタイリングの規則に近くなりますのでCSS設計を学ぶことをおすすめします。
    – T.Sa
    Commented 2017年7月6日 7:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。