迷いながらボタンを作っている。

こんばんは、有村です。
お花見、歓迎会、懇親会……コミュ障には辛い季節がやってきましたね!

さて今日のテーマは、迷いながらボタンを作っているです。
もちろんボタンってウェブサイトのボタンですよ。有村はフロントエンドエンジニアですよ。

で、ボタンなんですけど…何に迷っているかというと、ボタンをどう設計すればいいの?ということ。

私がまずやったこととしては、

  • それぞれのボタンの共通部位を見つける
  • ボタンのデザインと役割の紐付けをする

でした。
たとえば、「先に進む」や「戻る」的なボタンがあったとして…

  • 共通部位 … 角っこが丸い。font-weightがbold。テキストは天地中央。
  • 先に進む系は背景とボーダーが赤、テキストが白。戻る系は背景が白、ボーダーとテキストが灰色。

みたいな感じ。

そこでボタンを設計しようと思ったところ、先輩に強調されたのが、ボタン自身に具体的な幅を持たせるなということ。
私はなんでだろうと思ったのですが、よく分からないなりにアドバイスに従い、こんな感じのextendとmixinとclassを作りました。

なんかいい感じじゃないですか!?
と思っていた時期が私にもありました。

Aページ「ここのbtn_nextは幅100px、高さ20px、font-sizeは13pxやで〜」
Bページ「ここのbtn_backは幅100%、高さ40px、font-sizeは15pxやで〜」
Cページ「ここはbtn_nextとbtn_backは横並びでどっちも幅を均等に、2つの間にはmarginを15px、高さは30px、font-sizeは15pxにするで〜」

ありますね!あると思います!!!!
つまり何が起きたかと言うと、
ページ(というか配置場所)によって、幅や高さやfont-sizeが違う。
うわぁどうしよう!!!!

んん…まぁできないこともない…でもなんだろう、このオーバーライドっぷりは。
最初のうちはこれでもなんとかなったんですけど、たとえば「入力フォーム系に配置するボタンは常にサイズが一定」とか、別のルールとバッティングした時に、収集がつかなくなったんですよね…。

そこで、一度立ち止まって考え直すことにしました。

絶対に変わらないもの = extend
角っこが丸い。font-weightがbold。テキストは天地中央。

それぞれのボタンとして独自のもの = mixin
ボーダー色、背景色、テキスト色

場所によって変わるもの = ボタン自身は具体的な数値を持たない
幅、高さ、font-size

これをソースに起こしてみると…

からの、

からの、

のように、ボタンの大きさがどのようにあるべきかを別のclassに委ねると、変なバッティングも起きなくなる…!
更に、form_btnはサイズ指定しか持っていないので、btn_backやbtn_next以外のボタンが来ても対応できる…!

また、親にサイズ感を委ねるという意味ではカスケードでもいけると思います。

まだ悩みに悩んでいるのですが、今のところたどり着いたのはこんな感じです。
何が正解かは分からないけど…

「あーこれやっぱり違う!」ってなったら、また記事にしようと思います。

それでは、今日はこのへんで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です