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)を作る勉強会

関連記事

Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...