WEBサイトは完成した見た目は全く同じでも、ソースの書き方は人によって異なります。複数人の人が関わるようなプロジェクトの場合、コーディングやWordPressへの組み込みなどはコーダー以外の人が行う事があります。
また、プロジェクトの途中で担当者が入れ替わる可能性も考えると、ある程度のコーディングルールを決めておいた方が、引き継いだ後の余計なやり取りも減らせ、メンテナンス性も高いコーディングが可能になるかと思います。
現在管理人は、福祉施設でのWEBサイトコーディングに関する指導の傍ら、フリーランスとして個人で制作を行ってる事から、案件には管理人本人しか関わらない様に見えますが、最近は「コーディングだけ」とか「WordPressの組込みだけ」といった同業者からの依頼もあり、案件には複数の人が関わっています。
コーディングルールなんて決めずにやってる制作会社（コーダーの裁量に任せる）も沢山ありますが、そういった会社からの依頼でも、わかりやすいコーディングを意識しておけば次の仕事にも繋がりますし、自身でメンテナンスする際も作業の手間が減らせるというものです。
このページのコンテンツ
拡張性や再利用性が高くわかりやすいCSS
CSSの場合、class名の付け方でメンテナンス性に大きな影響があると考えます。日常的に業務としてコーディングを行っている人は、class名を付けようとする要素にはその要素に応じた名前を付けると思います。
例えば、バナーを配置するdivには.banner-frame、問合せ用のバナーの場合には.contact-blockなど。
人によっては.banner_blockとか.contactareaとか他のclass名を付けるかもしれません。文言が違っても上記くらいなら、コーディングした本人以外が見ても、その要素が何なのか察しが付くと思いますが、BEMという手法を取るともっとわかりやすいclass名にすることができます。
BEM（ベム）とは？
Block（ブロック）・Element（エレメント）・Modifier（モディファイア）の頭文字を取ったものです。class名でその要素の意味を表す事ができるため非常に便利です。
Block（ブロック）
要素の親となる部分をBlockとして命名します。
.header .header-inner .main .main-top
単語が2つ以上になるclass名には「-（ハイフン）」を使って分けます。
Element （エレメント）
ElementはそのBlockに内包されるパーツです。BlockとElementは「_（アンダースコア）」2つでつなぎます。
以下の場合、main-navというBlockの中にあるmain-nav__type1がElementになります。
<div class="main-nav">
<ul class="main-nav__type1">
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
</ul>
</div>
/*Block名__Element名*/ .main-nav__type1 .header-inner__search .footer__sub-list .sidebar__banner-frame
Modifier（モディファイア）
Modifierはその要素の状態を表す時に使用します。BlockまたはElementの区切りには「-（ハイフン）」を2つでつなぎます。
例えば、お問い合わせフォームで.send_buttonというclass名のボタンがあり、必須項目を全て入力しないとクリックできないようにするために、ボタンのデザインを変えたいといった様に、同じBlockやElementの状態を変えたい場合のclass名に使用します。
/*Block名またはElement名--Modifier名*/ .form__btn--send .form__btn--return .main-title--type1 .headr-search__btn--hover
classの振り方やセレクタの書き方について
HTMLのタグにスタイルを当てる方法はオススメできません。
HTMLタグにスタイルを当てた場合
<h1>テキストテキスト</h1>
h1 {
background-color: #eee;
border-bottom: 1px solid #ccc;
color: #333;
margin-bottom: 1em;
padding-bottom: 10px;
}
一見、普通のCSSですがこれは典型的なダメパターンの書き方です。
では、何がダメなのか？
これではサイト全体の<h1>～</h1>要素が全て同じスタイルになってしまいます。とあるページでは「色を赤にし背景色無しにしたい」と思った場合、それを打ち消すclassを書くハメになります。
<h1 class="title-type1">テキストテキスト</h1>
h1 {
background-color: #eee;
border-bottom: 1px solid #ccc;
color: #333;
margin-bottom: 1em;
padding-bottom: 10px;
}
.title-type1 {
background-color: none;
color: red;
}
この様に、HTMLタグにスタイルを指定してしまうと、あらゆる場面で打ち消しのCSSを書くハメになります。
classのみにスタイルを当てた場合
<h1 class="title-style1 title-style1--type1">テキストテキスト</h1>
.title-style1 {
margin-bottom: 1em;
padding-bottom: 10px;
}
.title-style1--type1 {
background-color: #eee;
border-bottom: 1px solid #ccc;
color: red;
}
上記の通りスタイルを当てる事で、タグにスタイルを当て打ち消すやり方（7行）より2行削減できています。また、.title-style1の様に、共通したスタイル部分と、個別スタイル部分を分離しておくことで再利用性が上がります。
要素を制限した指定をしない
/*ダメな指定*/
div.box-style {
padding: 10px;
}
h1.title-style {
font-size: 25px;
}
/*再利用性が上がる指定*/
.box-style {
padding: 10px;
}
.title-style {
font-size: 25px;
}
上記の様な書き方では、div.box-styleはdivでしか使えなくなり、再利用性が著しく下がります。特定の要素に制限した書き方は避けましょう。
class名はわかりやすく想定しやすい名前に
何の関連性もない名前は論外として、例えば.ma100というclass名の意味が予想できるでしょうか？
.ma100 {
margin-bottom: 100px;
}
/*改善例*/
.ma-under100 {
margin-bottom: 100px;
}
改善例の方がclass名を見ただけで、どんなスタイルなのか想像できると思います。
CSSのプロパティはアルファベット順に
管理人はプロパティの役割毎にまとめて書く傾向がありますが、これでは人によりバラつきが出てしまいます。コーディングルールとして運用するのであれば、アルファベット順にプロパティを記載するといいのではないでしょうか。
.box {
width:100px;
height:50px;
padding: 20px;
box-sizing: border-box;
}
/*アルファベット順*/
.box {
box-sizing: border-box;
height:50px;
padding: 20px;
width:100px;
}
プロパティはまとめる
まとめる事ができるプロパティはまとめましょう。
.box {
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
}
/*まとめる（ショートハンド）*/
.box {
margin: 10px 20px;
}
上記例では、4行のプロパティが1行で済みます。
CSSの入れ子（ネスト）は孫までにとどめる
入れ子が深いと継承の関係がわかりずらくなり、可読性が下がります。というか、BEMのルールで厳格に運用してれば入れ子にする必要はほとんどなくなると思います。
IDにはスタイルを当てない
IDは1ページ内で1度しか使えないというルールがありますので、再利用性がほとんどないCSSを生成することになります。
IDはclassより詳細度が強いことから、スタイルの上書きなどにもしばしば使われる場面がありますが、ID経由で継承されたスタイルは複雑で詳細度の計算もすぐにはできない事が多いです。
以下の様な多重で入れ子になったスタイルのメンテナンス難易度は高いと思います。例えば下記スタイルのp要素の色を変えたい場合、詳細度の計算は複雑で面倒になる事から、安易な方法で上書きしてるのではないでしょうか？
#box div > #contentbox div#box-style {
color: #333;
}
/*p要素の色を変える安易な方法*/
#box div > #contentbox div#box-style p {
color: #222;
}
階層が深くなり、更にメンテナンス性の悪いスタイルとなりました。
まとめ
自分（自社）で一から制作する際はこういったルールを設けて作業すれば、メンテナンス性が高いコーディングが可能になると思います。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
