【FLOCSS】初心者用 ～基礎から～

FLOCSSを初めて、使ってみたい人、必見！

FLOCSSを使っているサイト一覧
以下サイトを参考にしながら、これからのプロジェクトに活かしてみよう！

FLOCSS公式Git
https://github.com/hiloki/flocss

以下の手順で作業を進めていきます。
１．クラス名を考えながら、コードを書く
２．考えたクラス名を元に基本構造を作成
３.

１.まず、基本構造を作成

HTMLファイルを作成しながら、cssクラス名を考える

2.考えたクラス名を元に基本構造を作成

以下の構造（例）を参考に作成

├── foundation
│   ├── _base.scss
│   └── _reset.scss
├── layout
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _main.scss
│   └── _sidebar.scss
└── object
    ├── component
    │   ├── _button.scss
    │   ├── _dialog.scss
    │   ├── _grid.scss
    │   └── _media.scss
    ├── project
    │   ├── _articles.scss
    │   ├── _comments.scss
    │   ├── _gallery.scss
    │   └── _profile.scss
    └── utility
        ├── _align.scss
        ├── _clearfix.scss
        ├── _margin.scss
        ├── _position.scss
        ├── _size.scss
        └── _text.scss

Style.scss には何を書く？

（各ディレクトリに_index.scssを書かない場合)

@use "foundation/_reset";
@use "foundation/_base";

@use "layout/_footer";
@use "layout/_header";
@use "layout/_main";
@use "layout/_sidebar";


@use "object/component/_button";
@use "object/component/_grid";
@use "object/component/_media";
@use "object/component/_title";


@use "object/project/_articles";
@use "object/project/_comments";
@use "object/project/_gallery";
@use "object/project/_profile";
@use "object/project/_section";


@use "object/utility/_align";
@use "object/utility/_clearfix";
@use "object/utility/_margin";
@use "object/utility/_typography";

上のファイルの様に、@importを使って、Sassファイルを呼び出して1つのCSSファイルにコンパイルさせます！

命名規則

プレフィックスをつける

layout なら、.l-, componentなら、.c- のように、属しているフォルダ名の頭文字と‐でプレフィックスを頭につける。

ファイル名はクラス名

ファイル名は省略しないことでだれでもわかるようにする。

BEM命名規則を採用

Block, Element, Modifier,
例

<!--ボタン-->
<button class="c-button"></button>
<!--ボタンの色違い＋サイズ違いモディファイア-->
<button class="c-button c-button--blue c-button--small"></button>

Block-Element--Modifier

▼BEMの命名規則で参考になるページです▼
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

ディレクトリの構成

ディレクトリの構成は以下になります。
・sassファイルとcssファイル。
・sassファイルの下にはLayout・Object・Foundationフォルダがあります。
・indexファイルはsassの各フォルダに入れる
・style.scssでそれぞれのフォルダを一括して読み込む

indexファイルはsassの各フォルダに入れる

例えば、以下のファイルがfuondationディレクトリ配下にあったとします。
・base.scss
・reset.scss

foundationの中にあるindexは以下の様に追記します。

@use "base";
@use "reset";

このように、_index.scssを使うことで、style.scssでそれぞれのフォルダを一括して読み込むことができます。

style.scssはフォルダごとに一括して読みこむ

@use "foundation";
@use "layout";
・・・

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ご愛読ありがとうございました。
何か気づきや質問があれば、コメントお願いします。
新しい情報を取得するたび、更新していきます。

良ければ、LGTM、ストックよろしくお願いいたします！