最近自分が作っているサービスのベータ版が、完成間近になってきました。
最初はサーバーサイド、後からフロントっていう形で書いているので最近はもっぱらフロントです。
一通り、htmlとcssを経験できたので、こうしとけばよかったなあというものを自分なりにまとめました。
もちろんまだまだ初心者なので、浅い反省かもしれませんが参考にしていただければと考えています。
列挙した反省要素にまとまりは特にありません。
以下反省です。
classの命名超大事
これはフロントに限らないかもしれませんが、class命名は大事です。パッとみたときに画面のどこをさしているのかわかると、ストレスなくコーディングできます。chromeの検証使って毎回探しに行くのは本当にしんどい。。。
しかもclass名が被っていることを知らずに、同じclass名書いていたなんてこともありました。。。
自分は以下の２つを気にして書いています。
1.controllerの名前を最初につける
user_controllerのhtmlであれば、class名にuser_hogehogeとか書くべき。わかりやすいし、class名が被ることも防げます。
2.長くなってもいいから詳細に書く
これはリーダブルコードにも書いてあった気がしますが、わかりづらいくらいなら、長いクラス名にしてしまった方がいいです。
アクションごとにcssも分ける
railsにおけるcssはこのファイルに記述しなければならないみたいな決まりはありません。htmlとcontrollerはありますけど。。
次からは、アクションごとにcssファイルを分けようと思います。user_controllerのshowアクションはshow.scss、newはnew.scssという感じです。
どのhtmlに対応しているかをコメントで記述する
cssはプロパティごとに行が変わるため、縦に長いコードになりやすいです。
そうなるとこのhtmlに対応しているセレクタどこだっけ？みたいなのによくなります。
なので、コメントを逐一書きましょう。
例えばコメントはこんな感じです。=> /ここから先はレスポンシブ対応/
そうすることでレスポンシブはここから先だということが一発でわかります。
styleは基本使わない
htmlに直書きでcssを記述できるstyleですが、レスポンシブに全く対応できません。
styleは書かず、極力cssファイルに記述するようにしましょう。
大きい枠から作る
html、cssを書くときは紙やペンで一度構成を絵にしてからがいいです。さらに実装するときは大きい枠から先に作っていきましょう。そうしないと、大きい枠を変えたら、小さい枠もその度に変えていかなければなりません。大きい枠が小さい枠を囲んでいれば、大きい枠を動かせば小さい枠も同時に動きます。絵を描くことで、どの枠にどの枠を入れ込むかを考えやすくなります。
画像はバンバン使っていいと思う
htmlやcssで作ることができない（そんなことはないのでしょうが、自分のレベル的に。。）要素が時々ありました。
例えば、横の黒一本線をただ引くって、cssだと結構難しいです。なのでsketchで作っていました。もちろんそれが正しいコーディングかは賛否両論あると思いますが、スピード重視であれば良いかなと思います。
上に書いたやり方は正しくないかもしれませんし、もっと良いやり方があるかもしれません。
それはこれから勉強していきます！