プラカンブログSTAFF BLOG

2018.01.09

HTML・CSSをコーディングする時、私なりに気を付けていること

こんにちは関です。
今回のブログはマークアップするときに気を付けていることを紹介します。

可能な限り!importantは使わない

!importantはCSSが複雑になっている可能性があるので、可能な限り使うのは避けています。

!importantを使う例

.title {
  font-size: 150% !important;
}

IDを使わない

IDセレクタはクラスセレクタと違い、ページ内で1回しか使用する事ができませんので使わず、
CLASSを使うほうが良いです。
JavaScriptのdocument.getElementByIdなどIDを使わざるを得ない場合を除いて、使うことは避けています。

IDを使う例

<header id="header"></header>

修正例

<header class="header"></header>

タイプセレクタは使わない

タイプセレクタとはh1やulタグのことです。

h1やh2などはSEO的に書き換えることもありますので、タイプセレクタだけでプロパティを書くのは危険です。

タイプセレクタのみの例

<h1>タイトル</h1>
h1 {
  font-size: 150%;
}

修正例

<h1 class="title">タイトル</h1>
.title {
  font-size: 150%;
}

これでh1はh2やp要素に変わってもCSSは書き換える必要はありません。

ショートハンドを使うか使わないか統一する

ショートハンドとは一括指定することです。
こっちでは「margin: 10px 0 10px 10px;」と出てきて、あっちでは「margin-left: 10px;」となると、可読性が落ちたりするので、ショートハンドを使うか使わないか統一します。

ショートハンドが混在する例

.header {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	margin-left: 10px;
}
.footer {
	margin: 10px 20px 30px 20px;
}

修正例

.header {
	margin: 10px 10px 30px 10px;
}
.footer {
	margin: 10px 20px 30px 20px;
}

マージンの方向はmargin-bottomに統一する

例えば下記のようなレイアウトがあったとき、マージンの方向を統一します。

こっちのボックスは「margin-top」、あっちのボックスは「margin-bottom」が無いようにします。

マージンの方向がバラバラの例

.green {
}
.yellow {
	margin-top: 20px;
	margin-bottom: 20px;
}
.orange {
}
.red {
	margin-top: 20px;
}

マージンをボトムに統一した例

.green {
	margin-bottom: 20px;
}
.yellow {
	margin-bottom: 20px;
}
.orange {
	margin-bottom: 20px;
}
.red {
}

または一括にまとめても良いですね。

.green,
.yellow,
.orange {
	margin-bottom: 20px;
}

コンテンツに余白を入れる

文字がブラウザの端にくっついていると、文章が読みづらいので、
コンテンツの左右に余白を入れます。

余白が無い例

余白がある例

ヘッダーやフッターにmin-widthを入れる

レスポンシブや、PCでも画面の解像度が上がったため、もう必要ないかもしれませんが、
横スクロールした時に背景が途切れることがあるので、min-widthを入れています。

横スクロールした時に背景が途切れる例

修正例

.foo {
	min-width: 1200px;
}

min-widthを入れたことで背景が途切れなくなりました。

所感

以上が、私なりにコーディングで気を付けていることです。
もっとコーディングを極めたい方は「メンテナブルCSS」などで、検索する良いでしょう。

また、CSSの命名規則については弊社の
もう後悔したくない!CSSの設計概念を知りメンテナンス性を高めよう
をご参照ください。

個人的にはOOCSS(オブジェクト指向CSS)が好きですが、OOCSSは設計に頭を使うので難しいです。
BEM(ベム)は再利用がなく、名前が冗長になりますが、
バッティングすることがないので、書きやすいのではないかと思います。

この記事は1年以上前の記事で内容が古くなっている場合があります。

seki

この記事は、SEKI が書きました。