2021年6月7日

デザイン

FLOCSSとBEMを理解する

目次

  1. はじめに
  2. FLOCSSとは
  3. BEMとは
  4. まとめ

はじめに

本記事では、FLOCSSとBEMについて整理して学んでいきます!

私はマークアップをする際に、CSS/Sassのクラス名の命名に悩んでしまうことがあります。
一緒にFLOCSSとBEMをマスターして、より分かりやすい記述ができるようになりましょう!

FLOCSSとは

FLOCSS(Foundation Layout Object CSS)は、ファイルやディレクトリの構成だけでなく、命名のルールもMindBEMding(BEM)を用いて決められている設計思想で、導入することで混乱の少ない記述になるとされています。

FLOCSSの構造
  • Foundation
  • デフォルトとなるスタイルのファイル(reset.scssやfont.scssなど)

  • Layout
  • サイト全体のレイアウトに関わる要素のファイル(header.scssやfooter.scssなど)

  • Object
  • 使い回す要素のファイル
    ComponentとProjectに分かれる
    Utility(細かい調整のためのスタイルをまとめたファイル)も含む

Objectの構成
  • Object
  • – Component:最低限の機能を持ったもの(button.scssやtxt.scssなど)
    … 接頭辞にc-がつく
    – Project:プロジェクト固有の塊(about.scssやlogin.scssなど)
    … 接頭辞にp-がつく
    – Utility:細かい調整のためのスタイル
    … 接頭辞にu-がつく

Componentの最低限の機能の定義が人によって異なり、Componentなのか、Projectなのかどちらに分類されるべきか混乱が生じる可能性があるとされています。チーム作業する際は共通の認識が必要です。

例えば、inputなどの入力フォームのスタイルをまとめたものをform.scssとしてComponentに入れるのは規則に沿ったものと言えるでしょうか。

入力フォームは同じスタイルを使い回すことが多いという点で、Project(プロジェクト固有の塊)に当てはまらないものですが、様々なスタイルをまとめているという点ではComponent(最低限の機能を持ったもの)にも当てはまっていないような気がします。

今回の例の場合は、form全体の構成はProjectに分類し、inputやcheckboxなど個々のパーツはComponentに分類するのが良さそうですね!

BEMとは

BEMはクラス名の命名規則の一つです。

BEMに基づいて、CSSのクラス名の規則として作られた「MindBEMding」をBEMと呼ぶことがあり、今回もMindBEMdingをBEMとしています。

参考
CSSBEMの方法論とMindBEMdingという記法

具体的なBEMの書き方

具体的なBEMの書き方は、以下となります。

Block(1つのコンポーネント)__Element(子要素)--Modifier(バリエーション)

アンダースコアとハイフンの数は2個がMindBEMdingのルールです。
ハイフンを1つにしない理由は、要素の名前にケバブケース/チェインケース(例:hoge-hoge)が使われることがあり、それと区別するためです。

共通認識として、ケバブケースは使用しないことを前提にすればハイフンを1つにしても良さそうですね!

【componentの具体例】
component.png (13.6 kB)

【projectの具体例】
project.png (15.8 kB)

elementをネストするのはNG

Element(子要素)のネストは複雑になってしまうためNGとされています。
HTMLで見た時に入れ子関係だったとしても、常にブロック直下のエレメントであるように書くべきとされています。

【elementのネスト回避の具体例】
element.png (17.5 kB)

elementの中にelementを入れるのはOKとされています。少し複雑ですね。
アンダースコアが2回連続で続かないように気をつけましょう。

x block__element__element
○ block__element--element

まとめ

今回はFLOCSSとBEMについて改めて整理しました。

原則から発展したより細かい規則については、チームで共通認識を作れるようになると混乱の少ない設計にすることができそうです!

紹介にあたって参考にした公式のドキュメントも合わせて確認してみてください!
ドキュメント

FLOCSSとBEMを用いて別の人が見てもわかりやすい記述を書きましょう!

CSSのお仕事に関するご相談

Bageleeの運営会社、palanではCSSに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

かっきー

かっきー

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

CONTACT PAGE TOP