CSSの変数について

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

\--margin-medium--bottom: ;

またutilityを使うという方法もありますが、やはりマルチクラスが多くなりすぎるので変数の方が良いでしょうか？
CC BY-SA 3.0
2017-07-06T03:34:44.433
36128
2017-07-06T06:36:22.563
24247
question
css sass
CSSの変数について
質問が漠然としているため回答も粒度の細かいものは出せませんが、簡潔に回答をするとすれば、HTMLの構造も含めたCSS設計によって大きく異なります。

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

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

そのため、「上下左右にあるばあい、marginをいっぺんにかけない問題が起こる」というのであれば「そこで変数を使おうとするのが間違っていないか？」ということを考える必要があるかと思います。
CC BY-SA 3.0
2017-07-06T06:36:22.563
36139
2017-07-06T06:36:22.563
17324
36128
answer