インソースマーケティングデザイン
2017.10.17 コーディング
コーディングの基礎力を上げて速度アップを目指す。
マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。
コーディングをするにあたって、Emmetのように速度を上げるツールがありますが、
それ以前の、コーディングするにあたっての基礎となる部分で速度をあげることも大切です。
今回は、実際に私が実践しているやり方をご紹介いたします。
これとても重要です。
デザインを見て、どこでブロック分けするかを考え、とりあえずHTMLタグだけで組みます。クラス名とかつけるのは後。
繰り返し要素の場合、最初のループ分だけ作ります。
この段階でのブロック分けがサイト全体のコーディングに関わってきたりするので、よく考えてやることがポイント。
共通要素で他ページに流用できるパターンもありますからね。
②大枠のレイアウトを設定する
例えば2カラムの要素がある場合、先に2カラムを実現するようにスタイルを設定していきます。
該当ブロックに対してクラス名をつけ、HTMLファイル内にスタイルを書いていきます。
今までは、スタイルは最初からCSSファイルに書いて両方アップして見た目確認して・・・ってやっていたのですが、同一HTMLファイル内に一旦書いてしまうのがとても効率的でした。
設定したい要素のすぐ近くにstyleタグで 書けばOKです。
最終的にスタイルが固まったらCSSファイルに切り取って貼り付けるだけです。
③大枠のレイアウトができたら、細かい装飾をつけていく
ここからが長いですが、スタイルの設定が必要な箇所にクラス名を追加し、がしがしスタイルを書いていきます。
CSS設計次第ですが、設定する必要のあるタグにだけクラス名してあげればとりあえずいいかも。
BEMのような厳密なものは必要なさそうなものにもクラス名をつけてあげたほうがいいかもしれませんね。
何も考えてないように見えて結構いろいろ計算してやってます。
慣れてないと、最初のブロック分けが難しいかもしれませんね。
どなたかの参考になれば幸いです。
以上、虎澤でした。
