Help us understand the problem. What is going on with this article?

コンポーネント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は明るさを出したり、明るさを設定すると色のコードを出してくれたりします。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away