最近考えてる「使いまわせる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 {
  /* マイページでしか使わないカラー */
}

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

FLOCSS を扱いきれないあなたに贈る、スリムな CSS 設計の話 | WebNAUT

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

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

結論

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

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