コーディング規約（HTML・CSS）を作ってみた（公開済）
WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。
作って見た規約はこちら。
WEB制作ガイドライン
コーディング規約を作った理由
オレオレフレームワークやWordPressのテーマを作るのが好きなのですが、時々コーディングの癖が変わっていたりして流用しづらかったり、普段気をつけているところが抜けていたりする事が合って、均一なクオリティーでコーディングできていないと思ったので自分のルールを整理しました。
堅苦しいようにも思えますが自分のコーディングの原点というか帰る場所があるというのはなんというか安心するものです。
あと最近コーディングについて話す機会が何度かあったので、ちゃんと考えてますよって言うのを視覚化しておきたかったというもあります。
WEBサイト制作にはまじめに向き合ってます。
コーディング規約の必要性
コーディング規約とは特定のコードの書き方のルールや約束事を定めたもののことを指します。
ルールを定め記述方法を統一することで、コードが読みやすくなり、バグの抑制、開発効率アップ、メンテナンス性の向上などの手助けにもなります。
参考にしたところ
- コーディングガイドライン（HTML5）ver1.0
- 基本指針・概要 | HTML & CSS コーディングガイドライン ver.0.9
- 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN
- コーディングガイド by @mdo
- 新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
- HTML・CSSコーディングガイドライン | d-spica
コーディング規約の内容
私はWEB屋なのでHTMLとCSS中心に行いました。
本当はPHPやJSについても書きたかったのですが、自分の中での正義が決まっていなかったのでその辺は保留にしました。
今後の課題です。
コーディング規約は下記の構成で作りました。
- WEBサイト仕様について
- WEBサイトのフォーマットを作成しました。こちらでは公開していないですが、サイト初期制作のテンプレートもこれに規約に合わせて修正してgitで管理しています。
後からブラウザ対応の事言われるとしょんぼりするので私がサクサクコーディングできる内容でまとめました。
全部のブラウザ対応はお互い得しない事が多いので
- デバッグ
- これまでバリデータ使うことなかったのですが、今後の自分のスキルアップのためにもちゃんとしたほうが良いなと思って取り入れました。
HTML構造がどこまでSEOに効果があるのかわかりませんが、私はちゃんと胸を張って私のサイトはHTML構造ちゃんとしてます！って納品したいです。
- ディレクトリ構成
- 私が行うサイトは小~中規模が置いのでそれで使いやすい構成で作りました。※CMSは別設計
重要視しているのはassetで、オレオレソースやCSSフレームワークを使ってもメンテナンスしやすい設計にしています。
あとの構成は好みかな。
- 命名規則
- 考えるのに一番苦労しました。
言語化できてるか怪しいですが、自分でもこのルールで運用してみて検証したいところです。
- HTMLについて
- 自分の中の当たり前の事を整理した感じです。
- CSSについて
- こちらも自分の当たり前を整理した感ですが、セレクタの設計をこだわりました。
LESSなどCSSプリプロセッサを使いつつ、CSSフレームワークを使ってもメンテナンスしやすい設計にしたかったのでIDをセレクタに基本使わないようにしてます。
この考え方は異論があるのは承知ですが、開発スピード・流用性を考えるとIDを使わないほうが使いやすいと判断しました。
気をつけたこと
規約をつくるとなるとガッツり縛るみたいなイメージですが、そこは抑えて自分の必要なことだけ書き表しました。
もっと言うとコーディングしていて自分が「嫌だな」経験したところをルール化した感じです。
経験から不要なところも規約に入れてしまうと守らなかったり、放置したりしそうだったので守れる・守りたいコーディング規約として作りました。
私ひとりでしか使わない規約なのでメンテナンスし放題なので、ちょくちょく更新して活用できるようにしていきたいと思います。
WEBサイトも同じですが、作っただけで終わりじゃなくて運用していって初めて成果を出すことができると思っています。
やってみた結果
コーディングが気持よくなりました。
名称とか悩む時間がへって効率も上がっています。
ソースの流用もしやすくなったので、今後はもっとスピード上げれると思います。
この業界長くやっていこうと思っているなら、こういったルールは合ったほうが絶対良いな実感を持ってます。
宣伝
今回コーディング規約を作ったノウハウなどをお伝えする勉強会を4/12（日）に開催予定です。
よかったらご参加ください(*ゝω・*)
［大阪］［初心者］コーディング規約（HTML・CSS）を作る勉強会