マークアップをする時に僕が気を付けていること

こんばんは、発芽米ぱんだです。

先日は数学について書きましたが、今回は、肝心要の、マークアップについて書きます（本職なので）。

と言っても、具体的なノウハウの共有ではなく、普段マークアップするにあたって、どういった心構えでいるべきかという、殆ど自分向けの内容となっております。

目指すゴールが鮮明になればなるほど、そのゴールに辿り着くまでのプロセスも明確になります。ご参考になれば幸いです。というわけで、いざ。

ーーー

■HTML

HTMLの書き方は千差万別ですが、やはり流行り廃りというものはございます（なんか落語の前座みたいな始め方）。

他の技術と同様、HTMLも日々進化しているので、いつまでも古い記法に則った書き方をしていると、そのうちブーメランを喰らいます。クライアントにも迷惑をかけてしまいます。

そんなこんなで、HTMLコーディングの際に僕がいつも意識していること（目標のようなもの）は以下になります。

(1) バックエンドの言語(Ruby, Ruby on Rails, PHPなど)が絡んでも破綻(※1)しないようにする

(2) 修正が発生しても、既存のコードに手直しする必要がないようにする

(3) W3Cの勧告内容に基づいているかどうか

(4) 上記を、スピーディに確実にこなす（余裕ができたらHTMLテンプレートエンジンを使いこなせるように）

現段階では上の4つになりますが、他にあれば、また追記致します。

(※1)「破綻」とは以下のようなことを想定しています。

・要素を追加、削除した際に、レイアウト等が崩れ、手直しが必要になってしまう

・タグの種類を替えた際に、手直しが必要になってしまう

これらが出来るようになれば、いっぱしのコーダーであるとは思います。が、僕はまだまだ出来ていません。出来るようになる為には、どうしたら良いでしょうか。

僕が日々行っている（つもりである）ことは以下です。

・他人のコードをよく見て学ぶ（これが何かと手っ取り早い気はする）

・最新のHTMLに関する情報を常にキャッチする

・基礎的な知識が疎かになっていないか、教本を読んだりして自己チェックを行う

「他人のコードをよく見て学ぶ」、これが一番、目指すべきものが具体的にハッキリしてモチベーションも保ちやすいですが、他人様のコードが全て正しいとは限らないので、自分で調べる姿勢は必要だと思います。

これらを毎日実践でき、そして周りに共有できたら、理想ですね（主に自分に言っている）。

最近はCSSでのアニメーションも主流となり、何かと目新しいことに目が向きがちですが、やはり基礎は大事だと思います。

僕がCSSの記述で目標にしていること。

(1) 各ブラウザに依存しない見た目を作る

(2) 他人が手を加えやすいclassの命名、プロパティの設定（無駄に打ち消したりしない）

(3) W3Cの勧告内容に基づいているかどうか

(4) 上記を、スピーディに確実にこなす（Sassなどを使いこなす）

上を踏まえて、僕がCSSの記述で気を付けていることは以下です。

・各ブラウザの各プロパティの対応状況を注視しておく（アップデート情報など、最新情報は常にキャッチ）

・各ブラウザのレンダリングの特徴を踏まえておく

・classのネーミングをルールに基づいて行う（現在の主流ではBEMか）

・各プロパティの書く順番を、おおよそで良いので統一する（最初にwidth, heightを書くなど）

・共通化できるところは共通化して無駄を省く（打ち消しや「!important」を最大限なくす）

いつも使っているメインブラウザだけでコーディングをしていると、他のブラウザで見た時の表示の違いにゲンナリすることが多々あります。そういうことが起きない為にも、各ブラウザのレンダリングの特徴を踏まえることは大事です。が、根本から理解することは結構ハードなので、おいおい共有できればと…（逃げ）

ーーー

長々と書きましたが、要は「日々勉強」です。（ざっくばらん

今まで僕はほとんど独学でマークアップを学んできましたが、今現在大変なしっぺ返しを食らっているので、皆さんはそうならぬよう…（独学と言っても、きちんと体系化できていれば、何も問題はありません）

さぁ、月曜日。また明日から頑張っていきましょう。

それでは、また！

発芽米ぱんだのTechblog