8
12

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.

[CSS設計 フロントエンドエンジニア]BEMを触ってみた。

Last updated at Posted at 2017-02-26

今回社内で少し、BEMについて触れてみたので共有。(触ったばかりなので少しだけ。)

#BEMとは

  • 簡単に言うとフロントエンドの設計方法の一つです。Block,Element,Modifierの略ですね。
  • class名にルールがあると思ってもらえば分かりやすいと思います。

##BEMで書くと便利なこと

  • 接頭辞としてcomponentだったら、.c-block, .c-block__element、projectだったらp-block, .p-block__elementなどとするとコンポーネントかプロジェクトかなどが分かりやすくなる。
  • 最初のうちに結構やりがちな!importantなどで優先順位をあげてしまったり、クラス名を追加して思わぬとこでデザインがおかしくなったりするのを防げる。

##コード

  • 実際に見てもらったほうが分かりやすいかと思います。
  • 今までのコード
    スクリーンショット 2017-02-26 14.52.18.png
    スクリーンショット 2017-02-26 14.54.01.png
  • ちょっと適当ですがこんな感じで思い通りに動かないなんてこともありました。(量が増えれば増えるほどこういうのが多くなる。。)
  • BEMでのコード
    スクリーンショット 2017-02-26 15.01.08.png
  • ざっと説明させていただきます。.textboxがblockになります。
  • textboxの中にあるtextbox__textがelementになります。__アンスコ2つでelementということを表しています。要はtextboxの中のtextですよと言っているようなイメージです。
    スクリーンショット 2017-02-26 15.04.47.png
  • そしてtextbox__text--blueはModifierになります。要は--区切りにすることでtextbox__textの状態を表しています。今回の場合ですとtextbox__textの青色ですよという感じです。

##まとめ

  • .block
  • .block__element
  • .block__element--modifier

うまく伝えられているか不安ですがざっと説明いたしました。

##おまけ

  • sassで書くととても便利!
  • スクリーンショット 2017-03-10 13.18.16.png
  • こんな感じで書けるのでとてもわかりやすい!!
8
12
2

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
8
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?