自分用CSSメモ1
随分CSS周りを触っていなかったのだけれど最近少しずつ触る機会出てきたので少しおさらい。
言って0から全部作るとかでないので、まずは既存の大枠があってそれを触る上で困らないように動ける程度にまで持っていきたい
既存の作りを把握する
既存っていうのは今チームで携わっているプロジェクトの制作物のこと。
とりあえず既存の設計や作り（あるならスタイルガイド）を読むくせをつける
これはバックエンドのときでも同じだと思うのだが、
何故か自分はCSSだとそれを怠る傾向にあると感じる（設計がわかっていないからか、できていると思ってないからか）
仮に現物がめちゃくちゃだとしてもそれを把握するのは必要だと感じる（でないと自分がめちゃくちゃにしかねない）
CSSには色々設計方法あるみたいだが脇道にそれそうなので別途調べたい。
BEMとか軽く調べたが一緒にSassも調べたい。BEMの記法はSASSの&と相性がいいように感じた
どういう設計があるか把握していないと既存のコード読んでもわからないと思う
モダンな書き方がわかっていない
もともと使っていた書き方が今でも使っていいのか（新しいのに代替えされているか）把握できていない
たとえばfloatはもう昔のようなレイアウト調整のために使われていないとは知っている
画像の下に文字が回り込むデザインを実装するときに使えるでしょう
今はレイアウトの調整にはGridやFlexboxを使う
GridとFlexboxは解決する問題が異なる
サポートされているブラウザも異なる
CSS flexboxを使うのは簡単です。 HTMLの親要素に「display: flex;」を指定するだけです。
Flexboxのレイアウトではコンテンツがロードされた後に計算されるのに対して、Gridのレイアウトではコンテンツに関係なく計算されることを示しています。 つまり、Flexboxでページ全体のレイアウトを構築することは表示が遅くなるため、避けた方がよいということです。
CSS GridとFlexboxはどちらも異なる一連の問題を解決するように設計されています。
とりあえずFlexboxを覚えておこうと思う。
Gridはもっと大枠の部分の設計だと感じる。
インラインスタイルは悪なのか
インラインスタイルはよくないと常々言われながら個人的に疑問を覚えていたが
（要は使い回せないようなものにclassあてて定義する意味あるのだろうかと感じた）が以下の記事が参考になった
割と古い記事だが、ちょくちょく見ている。
【ダメな所 ３】Content Security Policy（CSP）的に NG
インラインスタイルが駄目だと言われる根拠によく使われる。 ただ、CSP がインラインスタイルを推奨していない理由については、 私ははっきりとした理由を知らない。何故なんだろう。
なぜなんだろう。そこでしか使われないようなものはインラインスタイルで書き起こしたほうがいいと自分は感じてしまっている。
→そもそも使い回せないインラインスタイルが微妙な気がしてきた（多分それ自体は汎用クラスに分解できそう）
結局汎用クラスを定義しまくって分解して適用させるのが無難なのだろうか
その他の細かいルール
暗黙知というか、自分がいつも困るところ
marginって4方向に領域指定できるけど、どのように指定すればいいのか（他の要素との兼ね合い）
そして，一般的なwebサイトではボックスは下に下に積み上げていくことが多いです．(つまり，隣接を下に発生させることが多い) そのため，隣接を発生させる下のボックスに余白を持つことで，『marginは下ではなく「上」で取る！』ことが多くなります，
また，横並びの時は右に並べていくことが多いと思いますので，横方向のmarginは左にとることが多いかと思います．
コメントの方にも結構有用な内容が書かれているように見える
その他参考 CSSで「余白」を制してデザイナーに好かれよう - Qiita
その他
偶然見つけた面白い記事
blog.mitsuruog.info
よくあるケースとして、デザインを見てHTML構造の設計について熟考せず、すぐスタイリングしてしまうパターン。 この場合、レイアウトするために過剰にCSSを使ってしまうことが多いような気がします。これを見ると、HTML構造を変えるだけでもっとシンプルに作れるのに、と残念に思います。
大枠のブロックを設計する上で大事なことは、まず大きな要素を抽出して、一度縦に並べてから後でCSSを使って横並びにするプロセスをイメージすることです。
ちなみに、横並びのレイアウトを考える上でのコツは、一緒の列にしたい要素をグループ化して、その外側をブロックレベル要素で囲うことです。 このブロックのことを「コンテナ」と呼び、CSSを理解する上で重要な概念です。どこかで取り上げようかと思います。
レイアウトで大事なことは、まず正しいHTML構造を意識することですが、これをプロセスに変換すると次のようになります。
必要な要素をまず縦に並べてみる。(配置する) 横並びにする要素を見つけてグループにする。(コンテナを作る) 横並びにするグループに対してCSSを設定する。(横並びにする) 細かなスタイルを追加する。(スタイリング)
ここらへんとても有用な内容だと感じた。
自分もHTMLの構造はふわっと浮かべるものの、意識が薄いきがするのでもう少し強めたい。
ベンダープレフィックス proengineer.internous.co.jp
他にも色々調べたいことはあるけど、一気に詰め込みすぎてもわかりづらくなるので一旦区切る （また、実際に触っていく上で色々新しく懸念事項も出てくると思う）。
