画面作成時に気をつけること

html、cssは記述が自由すぎる分どう書いていくのがいいのかが結構悩んだりします。
なのでコーディング時に意識することをまとめてみました。

HTMLのcssの記述順の順番を正しく合わせる。

html

<div class ="box1"></div>

<div class ="box2"></div>

css

/* NGパターン */
.box２{
  background-color:red;
}

.box１{
  background-color:blue;
}

css

/* okパターン */
.box1{
  background-color:red;
}

.box2{
  background-color:blue;
}

記述量が多くなっても、htmlとcssの順番を綺麗に保つことを意識する

divを乱用しすぎない

html

/* NGパターン */
<div>項目１</div>
<div>項目１</div>
<div>項目１</div>

/* OKパターン */
<ul>
  <li>項目１</li>
  <li>項目２</li>
  <li>３項目</li>
</ul>

タグは、本来の役割に応じた使い方をする。

CSSの値の工夫

軽量でシンプルなソースコードを意識する。CSSは、省略した記述も可能
　・ゼロには単位を付けない。（例：0px→0）
　・ゼロ以下の少数にはゼロを省略する。（例：0.1em→.1em）
　・色の指定が省略できるときは省略する。（例：#FFFFFF→#FFF）

css

/* NG例 */
.box1{
  padding-top: 0;

  padding-right: 10px;

  padding-bottom: 20px;

  padding-left: 10px;
}

/* OK例 */
.box1{
  padding: 0 10px 20px;
}

cssのプロパティを同じ順序で記述

１　ABC順

css

.button {
    background-color: #fff;
    color: #fff;
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 100;
    margin: 0 auto;
    min-width: 150px;
    padding: 50px;
    text-align: right;
    text-decoration: none;
    vertical-align: middle;
    width: 100%;
}

２　視覚モデル順

css

.button {
    display: inline-block;
    width: 100%;
    min-width: 150px;
    margin: 0 auto;
    padding: 50px;
    background-color: #fff;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 100;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
}

3　CSScombで任意の順番に自動ソート

cssを貼り付けるだけでプロパティの順番を好きな順番に変えてくれる。

など記述の順番が正式に決まっている形はないが、上記の方法で統一することで可読性の向上に繋がる

インデント、改行の統一

・インデントはタブ２つで統一する
・コロン後に半角スペースを入れる
・{の後に改行する

などのルールの統一をする

HTML/CSSのclassの命名規則の統一

・OOCSS (Object Oriented CSS)

html

<div class="box box-red"> </div> 
<div class="box box-blue"> </div> 
<div class="box box-green"> </div> 

css

/* boxの構造部分 */
.box {
    width: 100px;
    height: 100px;
}
/* boxの見た目（色）の部分 */
.box-red {
    background-color: red;
}
.box-blue{
    background-color: blue;
}
.box-green{
    background-color: green;
}d-color:blue;
}

・BEM

BEMでは、Block、Element、Modifierの三つに分けてクラス名を書く

html

<button class="box__button box__button--red">ボタン</button>

<button class="box__button box__button--blue">ボタン</button>

・SMACSS (Scalable and Modular Architecture for CSS)

OOCSSは「構造と視覚を切り離す」という考え方で作られている

html

<div class="box large">
    <button class="button bg-red">ボタン</button>
</div>
<div class="box">
    <button class="button bg-blue">ボタン</button>
</div>
<div class="box">
    <button class="button bg-purple">ボタン</button>
</div>

終わりに

一つ一つで見ると意外と単純なことですが、意外と意識できていなかった部分があったので、
これからは意識してコーディングしていきたいと思います。