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

新卒1年目エンジニアがFLOCSSと出会った話

More than 1 year has passed since last update.

FLOCSSとは

CSS設計思想の一つで、他にはOOCSSやSMACSSなどがあり、これらに加えてBEMなどの要素を取り込んでいることが特徴です。
FLOCSSに限った話ではないのですが、設計に記述ルールを設けることでコードの保守性が高くなったり、他人にわかりやすくなったりといろいろメリットがあります。

FLOCSSを使うことになった経緯

新卒でWebのフロントエンジニアとしてCSSを触るようになり、最初は簡単なページのサイトのコーディングからはじめました。ページが出来上がっていくに連れてどんどん装飾されていくのがとても面白かったんですが、それと同時に要素同士で干渉したりCSSで打ち消さなければいけないことが増えたりととってもカオスな状態にぶち当たったからです。そんな中CSSをググっていると「CSS設計」というものを知り、設計について勉強することにしました。

CSS設計思想ってなんやねん!という状態の僕が描く混沌としたコードに「秩序」ができました。
めでたし、めでたし!(当然まだ終わらない)

数ある中でもFLOCSSを選んだ理由は
・当時部品系とレイアウトのスタイルの区別が出来ていなくて、どう区別すればいいかわからなかった
・Componentの考え方はあったのでOOCSSがとっつき易かったが、それ以外の秩序がなかったから
「FLOCSS」という名前がかっこよかったから

FLOCSSの特徴

ディレクトリ構造

ディレクトリ内容を以下に示します。

    foundation/
    layout/
    object/
        ├─ component/
        ├─ project/
        └─ utility/

Foundation

リセットCSSやノーマライズCSSのような、ブラウザのデフォルトスタイルを初期化するための記述場所。いろんな種類・流派があるみたいなので「リセットCSS」などでググってみると自分にあったものが見つかると思います。

Layout

コンテンツの大部分を構成するようなページ内で単一の存在となるスタイルの格納場所。mainの領域やheader・footerなどを宣言します。先頭に「.l-〇〇」をつけますが、idで指定することもあります。

例: l-header, l-footer など

Object

OOCSSのコンセプトが元になっていて、主にページ内でビジュアル部分を担当しています。Objectは役割別に分割されたComponent、Project、Utilityを内包しています。

Component

このレイヤーはプロジェクト内で複数回使われる部品(Component)のことで、OOCSSでいう構造の部分を担っています。固有の値を持つことはせず、再利用できるようにします。「.c-〇〇」のプレフィックスをつける。

例: c-btn, c-label, c-grid など

Project

プロジェクト内で使い回すスタイルですが、Componentと違うのはそのプロジェクト固有であることが異なっているところです。「.p-〇〇」のプレフィックスをつける。

例: p-menuList, p-placeBox など

Utility

汎用クラスのことで、基本的に単一の機能をもち!importantをつけることが一般的です。「.u-〇〇」のプレフィックスをつける。

例: u-db, u-taC など

FLOCSSでよかったこと

・コンポーネントの構造と装飾が分割されていて再利用しやすい
・全体のレイアウトに関するスタイルがあるので、マークアップの構造がわかりやすくなる
・明確な命名規則やプレフィックスがあることによってエディタが予測して該当するクラス名を提示してくれるのでコーディングが楽になる。
・ユーティリティ最高

まとめ

FLOCSSはOOCSSとSMACSS、BEMの影響を受けているのでコンポーネントの管理からレイアウトの指定までトータルに出来るのが、いいなと思っています。
今回CSSアーキテクチャの一つとしてFLOCSSを紹介しましたが、たくさんあるので最初はどれから始めればいいかわからないこともあると思います。僕もその一人なんですが、どれにするかはおいといて「とりあえずやってみる」ことが大事だと思ってます。やってみるとこの設計思想が向いているパターンやその思想で対応仕切れないことが見えてくると思うので、サンプルでもいいので何かの思想に基づいて作ってみるといいと思います。

拙い記事ではありますが、ここまで読んでいただきありがとうございます!

(追記)これからやりたいこと

最近はAtomic DesignやReact.jsに興味があるのでその方向で何か作ってみようと思ってます。

Why not register and get more from Qiita?
  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