CSSの綺麗な書き方

プログラミングの勉強日記

2020年8月24日
現在しているインターンでCSSの綺麗な書き方（見やすい）書き方を学んだのでまとめる。
更新があればその都度追記していきたいと思う。

改行を作らない

　ソースコードは短く簡潔に書くことが大切なので、ソースコードには改行をしないようにする。

例

.top {
  margin: 0;
  font-size: 16px;
}
.second {
  background-color: red;
}

セレクタと中括弧の間にスペースが必要

　CSSはセレクタとプロパティと値で構成されていて、どの要素かを指定する部分をセレクタという。(クラス名とかID名にもスペースを空ける）

p {
  /* 処理 */
}

プロパティと値の間はスペースが必要

　以下のようにコロンと値の間にはスペースが必要。

.top {
  width: 100%;
}

まとめられる内容はまとめて書く(paddingやmargin)

　以下のようなコードの場合はpadding: 値で四方向すべてを、padding: 上下 左右で水平方向を、padding: 上 右 下 左のようにまとめて書くことができる。

.top {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 2px;
  margin-bottom: 3px;
  margin-right: 4px;
  margin-left: 6px;
}

　なので上記のコードは以下にまとめられる。

.top{
  padding: 0 10px;
  margin: 2px 4px 3px 6px;
}