BEM(CSS設計)について

#はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

#BEMとは？

BEMとは、多くの開発者が取り入れているCSS設計です

#CSS設計

CSS設計は、CSSを記述する時のルールです

#BEMを使うメリット

•　クラスの命令が簡単になる

BEMでは、ページを構成する要素をBlock、Element、Modifierの3つに分類して考えます。
これら3つの要素を使うことで、クラス名に悩むことなくなります

補足 :　CSS設計において、命名規則が最も難しいとされています

•　要素の再利用がしやすくなる

共通の要素を別の場所で再利用しようとしても、要素がHTMLに依存していると同じCSSを2つ書かなければなりませんでした。
しかし、BEMを使用することで、クラスの命名がHTML構造に依存しなくなります
HTML構造に依存しないことで、要素の再利用がしやすくなります

#BEMを使った命令

• Black
• Blockとは、ある要素の大元となるブロック要素です。Blockの命名には名詞を使用します。ElementやModifierは、このBlockを起点に命名されます。
• Element
• Elementとは、Blockに属する子要素です。1つ以上のElementにより、Blockは構成されています。Elementの命名には名詞を使用します。
• Modifier
• Modifierとは、Blockまたは、Elementに特別な修飾をする要素です。Modifierの命名には形容詞を使用します。

#命令規制

• BlockとElementをつなぐ場合は、アンダースコア2つ(__)でつなぐ

• Modifierにつなぐ場合は、ハイフン2つ(—)でつなぐ

##感想
最近chatspaceというラインのようなメッセージでやりとりができるwebページの作成をしてるのですが。
今日、やっとchatspceのDB設計が終わりました
初歩的なところで、かなり時間がかかってしまいました

##終わりに

もっとこうした方が良いよなどご指摘頂けると幸いです