5分でCSS設計規則「BEM」をおさらい フロントエンド BootstrapやVueを使用した開発で、CSSのクラス設計など強く意識することが少なかった今日このごろ。 たまたま一からスタイルを組む機会があり、改めてその設計規則であるBEMについておさらいしてみました。 BEMとはBlock Element Modifier の頭文字からきており、 Block -> 大きな括り Element -> ブロックの中の要素 Modifier -> ブロックやエレメントの変化 上記3つを用いた厳格な命名規則が特徴のCSS設計手法。 基本的なルール書き方Block__element--modifier の形で命名し、 それぞれアンダースコア2つとハイフン2つで区切る。 <例> <div class="Block"> <div class="Block__element"> <div class="B
![5分でCSS設計規則「BEM」をおさらい | エンジニアBLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/54a0304d266bc1e11eb9ffb4eee96574a35d5871/height=288;version=1;width=512/https%3A%2F%2Fcloudsmith.co.jp%2Fblog%2Fcommon%2Fimages%2Fnoimage-1200.png)