目次
コーディング中に学んだことを紹介します。
コーディングは、アウトプットのための様々な方法がありますが、
適切な方法を用いることをお勧めします。
インデントについて
最初に気を付けるのは、コードのインデントです。コーディング中には、いくつかのタイプのクラス、ID、および属性が使用されます。
そのため、コードをインデントしないと、属性を特定するのが難しいようです。また、次の項目で説明するクラス名を使用することが非常に重要です。
BEM法について
BEMアプローチにより、Webサイトの開発に関わるすべての人が、単一のコードベースで動作し、同じ言語を話すことが保証されます。 BEMは、CSSクラスを編成および命名するためのフロントエンドの命名規則です。ブロック、要素、修飾子の方法論
HTMLおよびCSSクラス名があります。これらのいくつかの簡単なルールに従うと、クリーンなCSSを作成するのに役立ちます。クラスの命名はCSSの中でも難しい部分でした。
また、外部の開発者にとって、開発者が指定したクラスが何をするのかを理解するのは困難です。
コードを複数回リファクタリングする場合、およびチームで作業する場合、命名規則はすぐに制御不能になる可能性があります。
CSSでの命名に関連する厄介な問題は、次の場合に発生します。
・クラスを誤り、オーバーライドが起こります。
・CSSとHTMLはどちらも読みにくいため、名前を付けるための明確な範囲と構造が存在しないです。
・新しいチームメンバーは、すでに作成されているクラスの学習と検索に時間を浪費します。
・グローバルコンポーネントとローカルコンポーネントの側面が明確でないため、コードの更新が困難です。
・ネスティングの処理方法がわからなくなります。
命名規則について
・単語はハイフン（-）で区切ります。
・ブロック名は、その要素と修飾子の名前空間を定義します。
・要素名は、二重下線（__）でブロック名と区切られています。
・修飾子名は、単一の下線（_）によってブロック名または要素名から区切られます。
・修飾子の値は、単一の下線（_）によって修飾子名から区切られます。
・ブール修飾子の場合、値は名前に含まれません。
・ブロック名は、その要素と修飾子の名前空間を定義します。
・要素名は、二重下線（__）でブロック名と区切られています。
・修飾子名は、単一の下線（_）によってブロック名または要素名から区切られます。
・修飾子の値は、単一の下線（_）によって修飾子名から区切られます。
・ブール修飾子の場合、値は名前に含まれません。
BEMの実装方法について
BEMには3つの主要な部分があります。
・内部にすべての要素を保持し、スコープとして機能するブロック。
・コンポーネントの特定の部分として機能する要素。
・特定の要素にスタイルを追加する修飾子。
・コンポーネントの特定の部分として機能する要素。
・特定の要素にスタイルを追加する修飾子。
Block name
HTML
<div class = "menu"> ... </ div>
CSS
.menu {color: red;}
Element name
menu__item
<div class = "menu">
...
<span class = "menu__item"> </ span>
</ div>
CSS
.menu__item {color: red;}
Block modifier name
menu_hidden
menu_theme_islands
HTML
<div class = "menu menu_hidden"> ... </ div>
<div class = "menu menu_theme_islands"> ... </ div>
CSS
.menu_hidden {display: none;}
.menu_theme_islands {color: green;}
Element modifier name
menu__item_visible
menu__item_type_radio
HTML
<div class = "menu">
...
<span class = "menu__item menu__item_visible menu__item_type_radio"> ... </ span>
</ div>
CSS
.menu__item_visible {}
.menu__item_type_radio {color: blue;}
CSSを作成するときに選択できるオプションはたくさんあります。
純粋なCSSでクリーンなスタイルを書くことを好む人や、BEMのような方法論を使用することを好む人もいます。
しかし、好みとは関係なく、スタイルは読みやすく、維持しやすいものでなければなりません。
コードをクリーンでクリアに保つ簡単な方法として、BEMなどの方法を使用することを検討してみてください。
