やまろぐはてな

勉強会レポートとか技術メモとか戯言とか

最近考えてる「使いまわせるCSS」について

CSS CSS設計

色々設計思想がありますが

結局のところ、しっかりと定まった案件だったはずが、どこかで「アレがほしいコレがほしい」という継ぎ足しが発生して設計が崩れ去るみたいなことはザラにあるようなので、CSSに期待するということ自体もはや間違ってることなのかもしれない。なので自分はCSSを書く時に極力無駄に広げないようにしている。

個人的に考える使いまわせるやつ

自分の中で考えた方法としては、コンポーネント単位というよりもFLOCSSのUtilitiesみたいなものを用意しておいて必要なものを補填していく、というやり方。以下は例。

1. 要素間の空き・余白について

marginなりpaddingなりがあると思いますが、以下みたいなので調整すればいいんじゃないのかなと思ってる

.mt-10 { margin-top: 10px;}
.mt-100 { margin-top: 100px;}
.pt-10 { padding-top: 10px;}
.pt-100 { padding-top: 100px;}

空きとか余白がある要素にいちいちクラス付与させんのかよ頭おかしいんか？と思われそうだけど、逆にこうした方が急に要素の空きや余白に変動があったときにでも対応できるし、誰が見ても分かりやすいんじゃないかと思う。

2. Modifierについて

btnという要素があってそれの幅が狭い・普通・広いバージョンを作る際にsmallとかdefaultとかlargeとかつけると思うけど逆にその間をものを作る時、命名に困るなどはあると思う（small-x？large-s？とか）。そのくらいだったら以下みたいにいさぎよく設定したい。

.btn-w200 {
 max-width: 200px;
}

もし幅可変のbtnを作るんだったらdisplay: inline-blockみたいに作ってpaddingで横余白とかで調整するというのがあればいいんじゃないだろうか。

3. レイアウトに関しては大枠を作っておく

flexレイアウトにしろclearfixレイアウトにしろ、中にどれくらいの大きさが入っても安心できる外枠をつくるべきかな。clearfixはなんだかんだで愛用できるものだし、flexに関しては基本以下設定でいいんじゃないのかな。あとは中の子要素で調整。

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

IE11のmin-heightバグ問題とかは各自なんとかしてください。

4.命名に困ったときに関して

たとえば似たような色があって機能もそこまで大した差異がないものを命名する時、ECSSのようにそのページのみにしか存在しないものとして作るのが良いかもしれない。黄色系統でも濃いのと薄いのが存在した場合はyellow-01とかyellow-02とかやらない。

.color--works { /* 制作ページでしか使わないカラー */ }
.color--mypage { /* マイページでしか使わないカラー */ }

こういう設計ってそもそもあるんかな

webnaut.jp と思ったらやりたいがほぼ一致しているのがここに書いてた。FLOU設計というそうです。

厳密に言えば僕のはclassの作り方・もたせ方をどうするかーみたいなことなんですけども。

結論

本当はこんなことしてないでスタイルガイドを確立させてそこにモノを落とし込むやり方が100倍良いと思う。お前らはもう少しスタイルガイドに対して意識した方がいい。

実例とか示せればいいかなとも思うのでネタがまとまったらまた何か更新します。こちらからは以上になります。