注意されたことをまずはひたすらまとめていく。
振り返り終わったら、指摘された注意事項に基づいて研修資料に近いものを作れたら、と。
(編集途中なので、随時upload)
pullreqを出すときは、reviewerに対してcompassionを持つこと
- フロントのpullreqならスクショはつける
- 動きのあるものならGifファイルを添付する
padding, margin, height, widthなどの?pxという長さ指定のものは、baseに指定したdefault_spaceなどを使い回す。
文字色などのmixinにあるものは、それを使い回す
image_tagにclassを付け加えて、そのclass使ってる？
(htmlのimgタグにclassをつけて使うことってできんの!?)
（新しいlayoutファイルにおいて）
不必要なrenderファイル、classは省く
cssのclassの組み方として、基本的に
.mental_care
.item
.content
のように、基本入れ子にするのは最初だけ。（最初の.mental_careとかをnamespaceとして使う）
font-size: $font_size_small - 1
のような書き方では、mixinの使い方として適切ではない
viewファイルには日本語を書かない。
config/locales
以下に全部まとめる。lazyなんちゃらを使って、viewファイルとの対応関係を意識しながら使う。
インデントは必ず守る
矢印とか簡単なiconは
= fa_icon
のようなコードで呼び出せる。何でもかんでも画像にしないで、楽な方法を探す。
partialしやすいように、繰り返しになるものを意識してclassを組む。
.list_wrapper
.list_wrapper.border
.list_wrapper.border
としてしまうと、使いまわしづらい
CSSの命名は、役割を命名すること
個別的な名前は避ける
.mental_menu
.mental_list
.list_wrapper
不必要な
height: 100%
width: 100%
は避ける。
共通化できる部分があるclassはまとめてしまったりした方が良い場合あり
squareとかcircleとか、使い回す可能性の高いものはmixinに入れることを念頭に置く
widthやheightをpx指定するのは割と避けるようにする
可変で伸びたときのこと等を考える
テキストの長さが長くなったりして２列になったりと、見た目に関して考えられる条件は全部考えて、すべての場合に対応できるようにしておく。
if width < 30
...
elsif width = 30
...
else
...
end
のように、網羅性は高い方がいい
width: 90%
のような、状態はできる限り親要素に持たせる
defaultのsizeやcolorは重複して指定しない
基本widthは100%になるので、わざわざ指定しない
見出し系はh系のタグで囲うことを意識する。
htmlのタグがそれぞれ持つ役割を意識して、適切なhtmlタグを使用するようにする
CSSはできるだけシンプルに書く。
増やそうと思ったらいくらでも増やせるのがCSSなので。
ネガティブマージン
マイナスの値の書き方は
$default_space * -3
- $default_space * 3
とかはダメ。
fa-angle-right
のように、もともと用意されているクラスにcssを直接書くのは避けるべき
同じ画像のようなものを、fa以外で書く（例えば画像で指定する）ときとかにいきなり崩れてしまうため
slimにおいて、
h3
= t('.content')
のように短いものなら、
h3 = t('.content')
と簡潔に書く。
sentenceの下にtitleというクラスがあるのは違和感
画像等をデザイナーの人に用意してもらったり、とデザイナーやビジネスサイドのようにエンジニア以外の人とのコンタクトを取りながら仕事するときは、自分からガンガン確認を取りに行く。
config/locales
において、他のところでも確実に使い回すものは
config
├──locales
├──views
├──users
├──profile
├──ja.yml
├──common
├──ja.yml
のように、commonにまとめて書いて参照できるようにする（lazyなんちゃらは使えなくなるが、DRYになるため）
' : 'のようなコロン等もI18nの中に入れてしまって問題ない
decoratorを使って、データの整形をまとめてやる（似たような処理をDRYにするため）
article.updated_at.strftime("%Y年%m月%d日")
を
article.decorator.updated_at
のように書けるようになる。
controllerの頭で
layout 'company'
と指定すればlayoutファイルは一括で指定できるし、actionによって変えたいときは、小数派のlayoutファイルをactionで指定したり、before_actionを使って指定するようにする
＝DRYに書く
borderはpx, solid, colorの順番で書く
sassにおいて
border: solid .5px $blue_color
border-radius: $default_space / 2
は
border: solid .5px $blue_color
radius: $default_space / 2
というように簡単に書ける