UIコンポーネントにはmarginはつけてはいけない【使い回しがしやすいから】

サムネCSS
スポンサーリンク
サムネ

今回はUIコンポーネントにはmarginなどの要素の配置を指定するCSSを指定しないほうがいいというお話をしたいと思います。

先日僕がお世話になっているもりけん先生(Twitter ブログ)から、こんなコードレビューをいただきました。

今まで僕は、UIコンポーネント自体にmarginを指定していたのですが、デザインの柔軟性の観点からあまり良くないみたいです。その理由について調べたのでまとめていきたいと思います!

今回の備忘録はこんな方におすすめ!

  • CSSを一通り勉強したけど、より製作者目線の書き方が知りたい!
  • 保守性の高いコードを書きたい!
  • warapperやcontainerってよく出てくるけど何のためにつけてるの?
スポンサーリンク

UIコンポーネントにmarginを指定した時の問題

例えばこのようなボタンがあったとします。

See the Pen ボタン by Rikuto Ui (@riku-1219) on CodePen.

パット見いい感じにできているボタンですが、このボタンにはmargin: 50px auto 0;の指定がされており、上に50pxの余白が付き、かつ中央寄せされます。

ボタンを複数用意して横並びにすると?

例えば、サイトの別ページで、ボタンを複数用意して横並び、ボタンの間を20px、中央寄せ にデザインを変更したくなったとします。

横並びということはdisplay: flex;ですね。

See the Pen ボタンを複数用意して横並び、ボタンの間を20px、中央寄せ by Rikuto Ui (@riku-1219) on CodePen.

justify-content: center;margin-left: 20px;を指定してもうまくいきません…。これは.buttonからmargin: 50px auto 0;を削除しないことには実現不可能です。しかし、このボタンはすでに別のページで使われており、margin: 50px auto 0;を削除してしまうと、他のページのボタンから上の余白と中央寄せが失われてしまいます。そのため削除することは避けたいですね。

こんなときどうするかというと、新しいボタン要素を新しく作ってしまうのがいいかと思います。

しかし、実はこの問題を根本的に解決する方法があります。

結論:使い回しができるから

結論としては、UIコンポーネントにはmarginはつけずに、UIコンポーネントを囲むdivにmarginを指定すると、他の場所でも使えるパーツにすることが出来ます!

上記のような例でもmarginを取り除くことで、ボタンを使い回すことができるようになります。

単体で中央寄せ

See the Pen ボタン単体で中央寄せ by Rikuto Ui (@riku-1219) on CodePen.

UIコンポーネントにはmarginを指定しなくても、できちゃいます。

横並びで、ボタンの間を20px、中央寄せ

See the Pen ボタンを複数用意して横並び、ボタンの間を20px、中央寄せ by Rikuto Ui (@riku-1219) on CodePen.

横並び指定も簡単に実現可能です!

まとめ

UIコンポーネントにはmarginを指定しないことで、他のページでも使い回すことができるというメリットがあります。そうすることでデザインが柔軟になり、保守性の高いコードを書くことが出来ます。また、ほかの場所で何度も使うようなものは、色指定なども別のクラスを持たせるなど、応用することも出来ます。

もちろん例外もあります。LPなどで、そのUIコンポーネントを一度しか使用しないようなときはUIコンポーネント自体にmarginを指定してしまってもいいと思います。

しかし、この先ページを追加したいというようなことがないとも限りませんので、基本的にはUIコンポーネントをdivで囲み、そのdivにデザインや配置のための指定をしてあげるといいと思います。

コメント

タイトルとURLをコピーしました