シンプルな例でFLOCSSについて考えた

皆さんこんばんは。RasieTechのWordPressコースmiku-nosukeです。今回の記事はCSS設計です。
いままで見て見ぬふりをしてきました。しかし、CSS設計は避けては通れない道。ココをおろそかにすると後で痛い目を見ます。しっかり学ぶことにします。あくまでも私が考えたことを備忘録として残します。

CSS設計

　CSS設計はざっくり言うと、①自分以外の人が見てもわかるように、②効率の悪い書き方はやめましょう、③そのためのルールに従いましょう、と言うことです。詳細についてはネットで多くの良サイトがありますのでそちらをご参照ください。

FLOCSS

　RasieTechの授業ではFLOCSSを使って設計します。ここでは実際のCSSを見てもらうことを主としていますのでFLOCSSについても他のサイトを御覧ください。ちなみに、私が参考にしたサイトは以下になります。
FLOCSSを用いたコーディングルールについて解説【サンプルサイトも紹介】
FLOCSSを使ったCSS設計での悩みどころと解決案

作ってみる

目標

こちらのカードスタイルのデザインをコーディングしていきます。バーツという単位で着目すると、
・中央にある丸
・丸の中にあるアイコン
・タイトル
・テキスト
とあることがわかります。

悩みどころ

目標物を確認したところで、さっそくコーディングしていきましょう。・・・手が動きません。はたと悩みます。FLOCSSはFoundation, Layout, Object, とあるわけです。さらにObjectの中にはcomponentとproject に分かれます。下図を見てください。まず、手が動かなかったのはこのcomponentなのかprojectなのかどちらなのかについて迷う。というのは、今回の目標物を下図(fig.2)のカード型オブジェクトに見立て設計した場合、『compnentと考えた場合』なのか『projectと考えた場合』なのかで迷ったからです。多くのサイトを見て回りましたが、正解はないのかもしれなくて個人やチームのルールに沿っているように見えました。

そこで、参考にしたのがAtomicデザインの考え方です。この考えを元に今回の目標物をみると最小単位の構成部品が下図(fig.3)になります。c- の考え方は最小単位の部品ですから・・・とすると、下の各部品はc-とすることで腑に落ちました。そしてこの部品を1つのブロックとしてまとめるのがprojectになります。つまり、fig.2 でのcardの例での『projectと考えた場合』を採用しました。その結果、fig.5 としてコーディングを進めていきます。

---

ファイル構成

c- を書く

c-card__circle

命名

さあ、いよいよ書きますよー、
まずは、円からです。クラス名を決めましょう。丸だから「c-card__circle」でいいか。では、class=”c-card__”さあ、書きますよー、書きます、書きま・・・書けません。
なぜ書けなかったかというと、余計な情報をインプットしていたからです（もしかしたら、余計ではないかもしれませんが）。それは、命名規則の中に形や場所でなく意味に名前を付けるというもの。とするならば、circle これって形だよね。ダメじゃね。shapeにする？うー、どうしようって、かなりの時間悩みました。最終的にはここの部分はレスポンシブでも形が変わるわけでもなく、大きさが変わるわけでもない。なら circle でいいやってことで「c-card__circle」に決定。正直これでいいのかどうか分かりません。

scss

では、スタイルを当てていきます。さあ、書きます、書きますよー、書けま・・・書けません。ここでも、頭でっかちになっていたのか、はたまた知識不足なのか。その理由とは最小単位には修飾要素を含めるな、ということです。修飾要素とは色、形、高さ、幅など。とするといったココには何を書けばいいのやら。

その時の心のつぶやきは、

つぶやき1

例えば 、html でc-card__circle を包む”c-card__wrapper”を用意して、scss では c-card__wrapper に幅、高さ、色を指定して子要素のc-card__circle に形を決めるcircle を当てるのがよいのか。そうすると、この例ではc-card__wrapperが最小単位とならず、じゃここはp-card__wrappeにして・・・ん、そうなると見通しが悪くなるし、そもそも c-card__circle 単独では形を作れないから必ずc-card__wrapper ペアでもってこないとならないし・・・といろいろと悩みます。

html

<div class="c-card__wrapper">
          <div class="c-card__circle"></div>
</div>

scss

.c-card__wrapper{
    width: 220px;
    height: 220px; 
    background-color: #fff;
    & > .c-card__circle {
        border: 3px solid #000;
        border-radius: 50%;
        background-color: #fff;
    }
}

つぶやき2

では、p-card__shapeをつくってここに幅、高さを書くかな。それで、c-card__circle には円であるborder-radius: 50%;と色だけをいれて・・・これはいけそうだな。でもhtml側のクラスが増えるし、うーん。悩む。

html

<div class="p-card__shape  c-card__circle"></div>

scss

.c-card__circle {
    border: 3px solid #000;
    border-radius: 50%;
    background-color: #fff;
}

.p-caed__shape {
    width: 220px;
    height: 220px;    
}

結局、最終的に以下の様にスタイルしました。幅も高さも色も全部入れです。理由は、見通しが良いのと、今回は基本的に円の大きさが変わることがなかったためです。背景色を変えたい場合は下記の様にします。

.c-card__circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid #000;
  background-color: #fff;
}

// 円の色を変えたい場合はこうすることにした

.c-card__circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #fff;
  &--gray {
    @extend .c-card__circle;
    background-color: #ccc;
  }
}

c-