フロントエンド初心者が30分のペアプロで学んだ事

ペアプロしてもらって学んだ事を書く

基本のキ

CSSは親子関係であることを意識する

1.書く順番

親のClass {
}

親のClass 子のClass {
}

みたいな感じでネストを読み手にわかりやすくする

2.共通部分ほど親に寄せる

親のclass {
background-color:#ffffff
}

親のclass 子のclassA {
background-color:#ffffff
}

親のclass 子のclassB {
background-color:#ffffff
}

こういう指定はアンチパターン、出来るだけ同じ指定を書かないようにする

3. 時にはmarginを計算することもある

classAの指定25px ＋ classBの指定5px
みたいな、デザインツールから抽出したCSSを使う時などに頭に入れておくとコードが良くなる

4.不必要にdevでタグを分けない

ネストの外で指定できる場合は一緒に指定しても良い
例えば中にあるパーツがユニークなもの一つとか

5.widthとheightはcenter指定だといらない

デザインツールでheightとなっている指定はline-heightにその値を入れる場合がある、height指定だと天井に張り付く、line-heightだと中央揃えになる

6.normal指定のものは書く必要なし

必要ある場合もあるけど、デザインツールからそのまんまコピペしてはならないの意

7.font-familyとかはheadで指定されている場合は書く必要なし

当たり前だが一応

8.時にはデザインから読み取れない値についてデザイナーさんとコミュニケーションする必要がある

恐れず聞く事、誰でも完璧ではない

9.bootstrap使ってる場合はありそうなやつは検索するとひっかかるのでそれを見て検討する

当たり前だが一応

10.必要なCSSかどうかはコンソールで指定自体を消したりなんだりしながら見る

当たり前だが一応

11.デベロッパーツールで最終的に適用されているCSSの値を一覧で見ることができるのでそれも使う

デベロッパーツール→Computedで見られる、CSSがごちゃついてたらとりあえずこれを使う