ウェブプロジェクトでは、cssの命名を標準化する必要があります。
Element-UIのソースコードを読んでBEM仕様を分析し、学習することで、BEM仕様のセマンティクスをより明確に、読みやすく、理解しやすくしています。BlockとElementは__ダブルアンダースコア、BlockまたはElementとModifierは--ダブルアンダースコアで接続されています。
BEM におけるブロック、エレメント、および修飾子の命名には、次のものが使用されます。
<button class="button">
Normal Button
</button>
<button class="button--state-success">
Success Button
</button>
<div class="footer">
<button class="footer__button">footer button</button>
<button class="footer__button--state-success">footer button</button>
</div>
.button {} /*基本ボタン*/
/*修飾語はダブルアンダースコアで連結し、セマンティクスをより明確にする。*/
.button--state-success {} /*ステータスが「成功」のボタン*/
.footer__button{} /*下ボタンのスタイル*/
.footer__button--state-success{} /*ボタンスタイルの下部に「Success」と表示される*/
/*state-success 複数の単語がある場合は、-で直接リンクする。*/
