コンポーネントCSS設計小技や思想まとめ #CSS設計

目的

今回社内のプロジェクトにて、CSS設計がキモになるようなプロジェクトを担当することになりました。
ざっくり概要をまとめると、
”ユーザーがサイトのブロック単位の要素を好きに並べ変えてLPを簡単に作れるようにする”
というもの。（なんだか楽しそうですね）

お気付きの通りバリバリのコンポーネント思考でのCSS設計が求められてます！
でも私はまだCSS設計についてはウブ中のウブ...
色々調べ倒して学んで行くしかありませんね。
そこで得た「これ使えるんじゃない？」といった考え方や小技をまとめて行きたいと思います。

綺麗で完結で再利用しやすい美しいCSSを目指して！

【随時更新予定です。】

環境・設計思想

CSSはstylusを用いる。
CSS設計はFLOU+BEMを用いる。

FLOU+BEM

BEM+FLOCSSについては以前記事でまとめたhttps://qiita.com/irico/items/2f1b6ce4e1649e5e78f1
⇧こちらを参考にしてください。
思想に関してはFLOCSS、命名規則に関してはBEMを使用するといった感じですね。

今回はFROCSSではなくFROUを使用してみます。

FROUとは？

https://webnaut.jp/technology/20170407-2421/
こちらを参考にしました。
FROCSSが

Foundation
Layout
Object

そしてObjectがさらに細分化して

Component
Project
Utility
となっているのに対して、

FLOUは

Foundation
Layout
Object
Utility

に分けてしまおう、となっています。
Projectの実質的廃止です。
今回のようなコンポーネント大量生産のプロジェクトの場合、実質固有のスタイルというものは存在しないのでうってつけであると考えました。
(ただその場合、大きいコンポーネントにくっついている小コンポーネントの多くの情報を持たせることになりそうです。
componentが肥大化したらprojectをつけるかもしれません）
そして今後のコンポーネントが増えていくことも見通し、Objectの粒度は割と細かく設定する予定です。

stylusの小技

記述や設計に役立ちそうな小技達です。

①stylusのFlie globbing

知らなかったー。
stylusは@import時にワイルドカードが使えるんですね。
【参考サイト】https://2inc.org/blog/2016/12/08/5483/

flie_globbing

@import component/*

これでcomponent以下のファイルを全て読み込みます。
むっちゃ便利だし完結！使い倒して行きます。

②block mixin

【参考サイト】https://qiita.com/tkn_e/items/a60c4c9ebaff29887bc2
まだまだ使いこなせてないblock mixin。
これを機に使ってみたいです。

こちらの参考サイト様ではbreak pointの切り替え時に使用していますね。

block_mixin

SP_MAX = 768px
sp(){
   @media screen and (max-width: SP_MAX){
      {block}
   }
}

/* 使用時 */
.box {
   display none
   +sp() {
      display  block
   }
}

block mixinは　定義時の{block}部分に
+sp(){ }の中括弧内に記述した部分を吐き出してくれます。
自由に付け足せるってわけですね！
これを応用してsp時の振る舞いを簡単に付けせますね。使います。

③ビルドイン関数

【参考】https://gist.github.com/ejointjp/8e0992cbf83565095adbf695d8bf65fc
Stylusには色々と便利な関数があるんですね。
今回コンポーネントにて明度のみが異なるコンポーネントなどが出そうなので役立ちそうです。

lightness(hsl(50deg, 100%, 80%))
// => 80%

lightness(#00c, 80%)
// => #99f

例えばlightnessは明るさを出したり、明るさを設定すると色のコードを出してくれたりします。

コンポーネントCSS設計 小技や思想まとめ

目的