THE HAM MEDIA BLOG

HTML&CSSのフォーマットは統一させておきたいと思った瞬間

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
つぶやき
タグ:
HTML
CSS

HTML&CSSを書いていく仕事に就いて数年、自分でコードを書いて納品するということが主なお仕事で、今もそれをメインにしています。

そんなお仕事に加えて、最近は人の書いたコードをもらってテンプレートに当てはめるというお仕事もいただくようになりました。コーディングのコードを書かなくなったとかではなくて、コーディング済のものをもらうケースもでてきたというだけなのですが、この変化は個人的にはなんだか不思議な感覚です。

もらったコードは多少のミス(HTMLの記述ミスや多少のCSSでのズレ)などはあるものの、別なコーダーさんか納品してくれたものですからそのまま使える!という気持ちでいたのですが、最近担当している案件のHTML&CSSは、送られてきたコードがあまりにも残念なものでした。

もらったコードをみてなんだかモヤモヤしているので、自分の今後のためも踏まえて書くことにしました。

もらったコードの何が”残念”だったか

こちらの手に渡ってきたHTML&CSSのコードで、何が残念だったのか書き出します。

■HTML

  • インデントが疎ら(有り・無しではなく、同一階層で階段上になっていたり、タブとスペースが混在したり)
  • 空タグの閉じ有り・無しの混在
  • 存在しないタグでのマークアップ
  • 汎用性のないclass属性(li要素全部に同じclassがついているなど)
  • id・class名の命名ルールの混在(単語のつなぎが_と-で混ざっているなど)

■CSS

  • normalize.cssとreset.cssの併用!?(指示にはnormalize.cssでとは伝えてある)
  • JavaScriptは別途実装すると伝えてあるにもかかわらずJavaScriptで生成されたHTMLとそこへのスタイリング

自分もダメなところはたくさんある

今でも自分はダメなところがたくさんあると思っていますし、間違いだってよくある。そんな自分がいうのも良くないでしょうけど、さすがに今回のは呆れてしまいました。

今回はちゃんとガイドラインももうけてあり、その確認もしてもらっているのです。面倒なことがたくさん書かれているというものではなく、最低限こうつくるという方針が書かれたガイドラインです。それすらも見られていないような作りをされてしまっては、そのあとに引き継ぐものとしては呆れるばかりです

では、どうしたらうまくやりとりできたのか?遅いですけど考えてみます。

やり取りをうまくするために

  • 最低限ガイドラインは守って作成する
  • わからないことは質問したり調べたりして確認をする
  • 次に渡す前にフォーマットとの差異がないか確認をする

最低限としては上記のくらいかなと考えています。細かいことえを言えば、バリデーションチェックをしてタグのとじ忘れやミスがないかのチェックも機械的に確認してほしいのと、コードの整形に関して言えばツールを使ってでもいいので全体を統一させたりなどもしておくべきだなと。

ガイドラインについては、場合によっては内容が古かったりその案件には見合っていない内容で出てくる場合もあるため(案件ごとでの更新がされていなくて使いまわされていたりなど)、そのような場合は、すべてそれに沿う必要がない場合もありますが、その案件での条件を確認して、統一されたフォーマットで作成できるようにしておく必要があるのではないでしょうか。

自分もコーダーとして発注された場合は、その案件での仕様・方針を確認してから進めているようにはしています。しかし、どうしても時間がなくて、後回しで直さなければならないような事態もでてきたりします。後回しにしてしまったがために抜けてしまうようなケースもあったりしますが、ちゃんとしたフォーマットのコードになっているのか、ガイドライン(もしくはその時の仕様)にそって書いてあるのか、今一度振り返って仕事していかないとと思う最近の出来事でした。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る