2020年1月22日デザインカンプを見ながらコーディングしたり、参考になるサイトを見ながら模写をしたり、コーディングをする機会が多いほど経験が積めて勉強になりますよね。後からコードを見直したCSSが汚くて見にくい。なんてことが起きてしまいます。それは、「コーディングのルールを決めてないから」でして、企業に入るとコーディングルールたるものがあって、それに準拠したコーディングが必要になってきます。フリーランスや副業でやってる人はどうか?個人で自分なりのルールを作ってコーディングする必要がありますね。今回は、コーディングルールが記載されている参考サイトから、自分なりのコーディングルールを考えてみました。誰に見られてもいいように書くCSSを綺麗にかくコーディング基本ルールコーダーによって、書き方はバラバラでいろんなコーディングのやり方があります。企業で仕事をするようになったり、チームでプロジェクトを進めるようになれば、自分のコードをたくさんの人が見るようになります。なると、一定以上の品質を整えるためにも、コーディングの基本ルールが必要みたいです。Googleにもコーディング規約があり、公開されています。参考にしたサイトを元に、自分も取り入れたいルールをまとめてみました。BEMを使うBEMは「Block、Element、Modifier」の略で、HTML/CSSの構成要素を分類して書いていくものです。以下のようになり、Blockが親要素、Elementが子要素になります。Modifierは、要素に対して、大きさや色などの装飾を加える分類。smallであったり、redというような、大きさや色を指定したりする場合に使います。「block」に対して、「element」と「modifire」をそれぞれ「__(アンダースコア2つ)」「_(アンダースコア1つ)」で繋げてセレクタを作ります。}modifierを「––(ハイフン2つ)」で繋ぐmindBEMdingという書き方もあります。どちらを使ったらいいのかわからないので、とりあえず「–」を使っていこうと思います。ポイントとしては、クラスの名前だけでHTML要素の意味を伝えられるようにすることだと思います。ちなみに、Sassとの相性が抜群みたいです。半角スペース2のインデントインデントを統一することで見やすくします。</header>インデントを揃えるってことです。red;}基本だと思いますが、全てのコードの書き方を統一することで、最終的に見やすいコーディングができそう。}アルファベット順に記述することで、検索性がよくなります。}}こんなのはやめよう、ってことです。基本的に全てにclassをつけるように心がける。classの方が検索もしやすいし、多分メンテナンスもしやすいはず。クラス名の単語が長くなりそうな時はハイフンでつなぐ単語の先頭の文字を大文字にする「キャメルケース」や、アンダースコアもありますが、とりあえず使いやすさの問題からハイフンに決めました。クラス名の命名はわかりやすくクラス名は、どうすればわかりやすいかを考えてつけるようにしていますが、慣れるまでは難しく感じます。いえ、適当につければいいというものでもないんだなーと実感。わかりやすく、クラス名を見ただけでどんな要素なのかを理解できるようにつけるのが理想です。</section><!--/news-->これも、検索性向上のためです。誰に見られてもいいように書くBEMインデントは半角スペース2コロンとバリューの間は空けるプロパティはアルファベット順classで指定し、要素名の指定は最小限クラス名の単語はハイフンでつなぐクラス名の命名はわかりやすくdivの終了タグにはコメントを入れるまとめると、こんな感じです。書いてきましたが、結論は「誰に見られてもいいように書く」ってことです。コメントだったりクラス名をわかりやすく意識できれば、見やすいコーディングは身についてくるはず。今は独学で勉強中ですが、「誰かがコードを見る設定」でコーディングをしてみよう。すると、自然とわかりやすくしようという意識が働くはず。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。