4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FLOCSS設計ってどんなんだっけ?となった時に思い出せる簡単なメモ

Posted at

概要

Found Layout Object CSSの略で、OOCSSやBEM、SMACSSの流れを受けて考案されたCSS設計思想

FLOCSS

Foundation

  • サイト全体のデフォルトスタイルを定義する
  • _reset.scss, _base.scss, _mixin.scss, _variables.scss

Layout

  • Objectの配置を決める
  • ページ単位で唯一の存在になるのでidセレクタを使う
  • 構造に関わる部分でProjectごとの整列用にflexfloat解除につかったり、sitewidthを定義したりする程度の記述
  • _header.scss, _sidebar.scss, _footer.scss

Object

  • Component
    • 再利用可能なパーツ
    • プレフィックスにc-をつける(.c-btn, .c-btn_primary)
  • Project
    • Componentにするほどでもないパーツ(個々のページの中でしか使わない、1回しか使わないなど)
    • プレフィックスにp-をつける(.p-article, .p-article__title)
  • Utility
    • 汎用クラスで単一のスタイルを持つ
    • プレフィックスにu-をつける(.u-clearfix, .u-block)

命名規則ではBEMと同じ規則が用いられている

ディレクトリ構成

FLOのそれぞれの構造に合わせ、ディレクトリ構造も分割することでメンテナンスしやすくなる

css
|-- foundation
|   |-- _base.scss
|   |-- _reset.scss
|-- layout
|   |-- _main.scss
|   |-- _sidebar.scss
|-- object
    |-- component
    |   |-- _button.scss
    |   |-- _grid.scss
    |-- component 
    |   |-- _articles.scss
    |   |-- _profile.scss
    |-- component 
        |-- _clearfix.scss
        |-- _margin.scss
        |-- _text.scss

sample.html
<!-- flocss.html -->
<h1>FLOCSS</h1>
<!-- 以下、layout idセレクタを使う -->
<div id="countainer">
  <!-- 以下、component(module) c-を使う -->
  <ul class="c-menu">
    <!-- FLOCSSではmodifierをつける時マルチクラスパターンを基本とする -->
    <li class="c-menu__item c-menu__item--large">link</li>
    <li class="c-menu__item c-menu__item--active">active</li>
  </ul>
</div>
style.scss
.c-menu {
  list-style-type: none;
  &__item {
    width: 80px;
    margin-bottom: 5px;
    color: #4486F7;
    border: 1px solid #4486F7;
    text-align: center;
    &--large {
      width: 100px;
    }
    &--active {
      color: #fff;
      background-color: #4486F7;
    }
  }
}
4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?