【ほぼ日報。】 vol.20 | 2019.7.30（火）

今日やったこと

コーディング

昨日メール対応に追われていたのが嘘のように静かだった。

ので、コーディングに集中。おかげでほぼほぼトップのコーディングは完成した。

いつも自分がコーディングしやすいように、似たようなレイアウトにしてしまうけど、今回コーダーさんに渡す前提で作ったデザインだったので、コーディングちょっとだけ鍛えられた（笑）

コーディングするとき、いつも「このタグにこれ入れていいんだよね…？」「もっと記述が少なくなるいい書き方ないのかな」とか考えてしまうので遅くなってしまう。

いつか読むぞと思っていたCSSの記述に関する記事を今日読んでしまったので、さらに時間がかかってしまった。

新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣 - WPJ

4つの習慣というのは以下。

ー4つの習慣ー
①グローバルセレクターや要素セレクターを避ける
②詳細度が高すぎるセレクターは使わない
③セマンティックなクラス名を使う
④マークアップ構造とCSSを密結合しすぎない

この4つの習慣、ほとんどできてなくて愕然とした。

①グローバルセレクターや要素セレクターを避ける

要素セレクター（pとかh1とかbuttonとか）に直接CSSを指定してはダメということ。大体はできているけれど、見出しタグには今だに指定してしまう…。これは恥ずかしいことなのかもと思ったので早速今日導入した。今のところ記述が多くなってめんどくさいという印象しかない。

②詳細度が高すぎるセレクターは使わない

「クラスをチェーンしてはいけない（↓以下例）」、

section.newsArea {
    background-color: #fcfcfc;
}

は再利用前提の部品（モジュール？）以外でやってしまっている...。

ファイルサイズが大きくなってしまうから避けるべきなんだそう。単純だ！あと、同じ目的を達成できるのであれば詳細度を上げる必要はないんだそう。なるほど。

③セマンティックなクラス名を使う

これは大丈夫のはず。先輩から管理しやすいコーディングの仕方盗んだもんね、えっへん。

④マークアップ構造とCSSを密結合しすぎない

子孫セレクターはよく使うし、そのせいでhtmlに戻ってdiv追加してクラス作って詳細度上げるってのもたまーにやっちゃうことある。（今日やった）

①に通じるものがある。クラス指定していこう。

コーダーさんぜひ記事読んで振り返ってみてください。勉強中の方にはちょっと難しいのかも…。でも理解しなくていいから一読してみてください。

もう一回貼る↓

新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣 - WPJ

仕事でデザインしてるときの日報はすらすら書けたけれど、コーディングの話になると単語正しいかとか間違ったこと言ってないかとかとっても慎重になってしまいます。

レスポンシブも考慮したCSSの書き方とかも勉強したいけれどみんなどこで学んでるのかすごく知りたい…。