Cntlog > スキルアップ・ノウハウ > コーディング > コーディング規約(HTML・CSS)を作ってみた(公開済)

コーディング規約(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)を作る勉強会

関連記事

スマートフォンサイトを作るときによく使うhead内のタグ... スマートフォンサイトを作るにあたってよく使うmetaタグなどheadで使う要素をまとめてみました。 スマホサイトを作り慣れていない人の参考になれば嬉しいです。 目次 viewport ...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
Nuxt.jsのトラブル解決方法 今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。 Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。 インストー...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...