好きこそものの上手なるby yukichi

プログラミング学習の備忘録。万歳車輪の再発明。

レビューから学んだHTML/CSS

HTML/CSSの課題の中で、自分を含めた提出者たちに対するレビューを見て学んだことをざっと書き出してみた。

細部にこだわるのは大事だと思うけど、気にしすぎると書くのが億劫になってきちゃうので、自分のレベルに合わせて気にする数を増やしていくスタイルで。

クラス命名関係

  • BEMを使って命名←初めて知った

Block: 大きな要素

Midifier: 同じパーツだけど状態や見た目を変えたいとき指定

Element: 上以外

可読性が上がる、SCSSと相性がいいとのことで修正がしやすそうだ、と思った。

  • 凡庸的な命名は、重複による混乱を招く恐れがあるので注意
  • クラス名でその部分が全体の何にあたるかが判別できるような名前をつけてあげてね

HTML・CSSの設計にBEMを取り入れてみよう! | Tech dig

 

HTML関係

  • 画像等のパスは明確に記入
  • 空行のルールを明確に。あったりなかったりすると見にくいよ
  • hの数で、ファイルを見たときにそこが全体のどの部分かわかるような数字をあてがってね 

・h1~h6まであり

・デザインの都合でhタグを使わないでね。hは見出しって意味なので、あくまで文書の論理構成に基づいてあてがう。

→h1は大見出し、1ページにつき1回利用の原則

→文章の構成を考えながら、小さい数字から順番を守って使用

  • buttonタグのプロパティ指定の際に改行

 

CSS関係

  • タグに対してスタイルをあてるのではなく、クラスに当てていく
  • 色指定は単語ではなく、カラーコードで

   カラーコードは、2桁ずつ分けてRGBを16進数で表したもの

  • before::を取り入れる(::afterも)←初めて知る

  指定した要素の前に何かスタイルを追加できる。

  contentプロパティで文字を追加することも可能

::before (:before) - CSS: カスケーディングスタイルシート | MDN