WEBデザイナーが実際に出くわした良くないCSSのコードまとめ

このエントリーをはてなブックマークに追加

WEBデザイナーが 実際に出くわした 良くないCSSのコード まとめ

いいCSSってわかりやすい、探しやすい、再利用しやすい、拡張しやすいって言われるけど、実際のコードではどんなことに気をつけたらいいか難しいですよね。ということで、今回は僕が実際に出くわしたあんまり良くないなっていうCSSのコードをご紹介します。

いいCSSを書くには

  • わかりやすい
  • 探しやすい
  • 再利用しやすい
  • 拡張しやすい

基本は上記の4点が守られているCSSがいいとされていますが、サイトを運営していると前任者のコードに悩まされるときがありませんか?更新や修正をしたいけど、「なーんかどこのCSSをいじればいいかわかんないな」「なーんかわかりにくいな」とか「あれ?ここもスタイル変わっちゃうの?」とか。

結構その場しのぎ的なコードを書きがちですけど、そもそもわかりにくいCSSとか更新しにくいCSSは避けたいですよね。

そこで、僕が困ったときのCSSのコードをまとめてみました。今後良いCSSを書くためのヒントになればいいなーと。

CSSのプロパティはまとめられるものはまとめる

まとめられるものがあるならばまとめた方がいいですね。ファイルサイズ節約にもなります。
運用の時に付け足す時もそっとまとめてあげるといいですよね!!

//Bad
h1 {
	padding-bottom: 2em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0;
}

// Good
h1 {
	padding: 0 1em 2em;
}

意味のないセレクタ、スタイルは作らない

下記のコード見た時、正直びっくりしました。以前担当していた方が書いたんでしょうけど、同じスタイルじゃん・・・。なんでこうなったかは理解に苦しむんですが、これもクラス一個で各ページ使い回せばいいだけですよね。しかも、エラーメッセージなんて共通パーツじゃん。

// Bad
.regist .error p{
	color: #f73265;
	font-weight: bold;
	font-size: 13px;
	margin: 8px 0;
	padding-bottom: 3px;
	border-bottom: 2px solid #f73265;
}

.memberinfo #main .error-message{
	color: #f73265;
	font-weight: bold;
	font-size: 13px;
	margin: 8px 0;
	padding-bottom: 3px;
	border-bottom: 2px solid #f73265;
}

// Good
.error-message{
	color: #f73265;
	font-weight: bold;
	font-size: 13px;
	margin: 8px 0;
	padding-bottom: 3px;
	border-bottom: 2px solid #f73265;
}

マークアップが変わっても問題のないセレクタにする

idセレクタ、クラスセレクタ、タイプセレクタと異なるセレクタが混在していると、マークアップが変わった時に対応ができません。

// Bad
#hoge .menu ul{}
#hoge .menu ul li{}

// Good
.menu{}
.menu__item{}

html

<ul class="menu">
	<li class="menu__item"></li>
</ul>

上記のGoodパターンのようにBEMな書き方にするとわかりやすくなりますし、マークアップが変わっても対応しやすいです。あと、idセレクタは使わない方がいいかなと。無駄に詳細度が高くなってしまって上書きがしにくくなります。

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

これもマークアップが変わっても問題のないセレクタにすると一緒ですね。

これはわかりやすいっちゃわかりやすいんですが、再利用性に欠けます。というのもh1にしか使えないので、たとえば、マークアップ的にh2の方が適切の場合はスタイルを適用できないですね。

// Bad
h1.title{}


// Good
.title{}

親要素のセレクタに依存したセレクタにしない

cssのテクニックとして「body」タグにクラスをつけてコンテンツのスタイルをページごとに変更したりします。でもこれって「body」タグにクラスに依存しすぎてしまっていて再利用しづらいし、拡張もしにくいですよね。

たとえば、デフォルトのヘッダーとメニュー詳細ページでヘッダーのスタイルを変更したい場合、以下のような書き方します。でもこれって、運用していくなかで新しくページを追加して(LPとかね)詳細ページと同じヘッダーでって場合どうしますか?

パターンとしてはdetailと同じスタイルをLP用につくるか、LPのbodyにdetailを付与ですよね?
後者の場合ってめちゃくちゃ気持ち悪いですよね。detailページでもないのにbodyにdetailって・・・

となると前者のやり方になってしまいます。

// Bad
.header{
	width: 100%;
	background: #000;
}
.detail .header{
	width: 100%;
	background: #fff;
}

.lp .header{
	width: 100%;
	background: #fff;
}

// or
.detail .header, .lp .header{
	width: 100%;
	background: #fff;
}

このパターンでCSSを書くとページが増える度にセレクタをかきくわなければいけませんね。
これをBEMでセレクタを書くとめっちゃわかりやすくなります!!ポイントはページ単位で切り分けないでプロパティごとに切り分けた方がいいかなと思います。

他のページでも再利用しやすくなりますよね!!

// Good
.header{
	width: 100%;
	background: #000;
}
.header--bg-white{
	background: #fff;
}
<header class="header header--bg-white">

</header>

モジュール内の命名に気をつける

<div class="media">
	<h3 class="title"></h3>
	<div class="content"></div>
</div>
.media{}
.media title{}
.media content{}

よくあるパターンですよね。モジュールごとに親要素(この場合だとmedia)内で簡単なCSSを使うパターン。セレクタの命名が簡単過ぎてが逆に困るパターンです。
titleとcontentなんて色んなとこで使われそうですし、モジュール内とかページのタイトル、コンテンツでも使われそうです。そうすると意図していないスタイルが付いてしまう可能性もあります。

ここでBEMのやり方だと・・・

<div class="media">
	<h3 class="media__title"></h3>
	<div class="media__body"></div>
</div>
.media{}
.media__title{}
.media__body{}

これなら他のtitleのスタイルに左右されずにすみますね。

スタイル、スクリプト、文書構造は完全に分離させる

スタイルのセレクタをjs(jQuery)で使うセレクタは混同しないほうがいいです。同じセレクタを使っていると誤ってクラス名を変更するとjsも動かなくなってしまいますよね。スタイル、スクリプト、文書構造は完全に分離したほうがそれぞれ利用しやすくなります。

Bad

<a href="#" class="hoge">click!</a>
.hoge{}
$('.hoge').click(function(){
	// ・・・
});

Good

<a href="#" class="hoge js-hoge">click!</a>
.hoge{}
$('.js-hoge').click(function(){
	// ・・・
});

クラスの命名ではBEMがいいのかも

アンチパターンを紹介していきましたが、BEMっていいよっていう記事になってしまっている気が・・・

でもまー、僕はBEMのやり方ってすごくいいやり方だなって思っています。いくつかお仕事で新しいサービスの立ち上げに参加させて頂いたりしていますが、BEMの書き方をするようになってからCSSのセレクタで悩むことがなくなりました。

Block、Element、Modiferを使い分けることで再利用しやすい、わかりやすい、拡張しやすいCSS作りができるのはないのかなと思います。

ただ、やりようによってはものすごくわかりづらい?嫌われるやり方にもなります。

BEMで書かれたクラスを長くなりすぎないようにする

BEMで書くならここはすごくポイントだと思います。BEMな書き方ってどうしてもセレクタが長くなりすぎるんですよね。BEMが嫌いな方はこの辺で敬遠している方が多いです。

僕は多少長くなるのはしょうがないにしても、限度があると思ってます。

.menu{}
.menu__item{}
.menu__item__media{}
.menu__item__media__thumb{}
.menu__item__media__title{}
.menu__item__media__title--red{}
.menu__item__media__meta{}
.menu__item__media__meta__date{}
<ul class="menu">
	<li class="menu__item">
		<a class="menu__item__media" href="#">
			<h3 class="menu__item__media__title menu__item__media__title--red">タイトル</h3>
			<div class="menu__item__media__thumb"><img src="hoge.png" alt=""></div>
			<div class="menu__item__media__meta">
				<span class="menu__item__media__meta__date">2015/12/31</span>
			</div>
		</a>
	</li>
</ul>

もーこれはながすぎでしょ。これBEM使わないほうがいいんじゃないかってくらいですね。

でもこれってうまく分離できればすごくわかりやすく再利用しやすいCSSのコードになるんですよね。
まとめられそうなところというか仲間を見つけて、あとは他ページでも使えそうかっていうのを考えるといいのかなと。

1, menuとitemはリスト形式で使えそう
2, mediaはタイトルとサムネイルのレイアウトパターンとして使えそう
3, metaは他ページでも使っている(詳細ページとか)

ってなると小分けができそうです。

BEMなクラスを小分けにしてみる

// menu
.menu{}
.menu__item{}

// media
.media{}
.media__title{}
.media__title--red{}
.media__thumb{}

// meta
.meta{}
.meta__date{}
<ul class="menu">
	<li class="menu__item">
		<a class="media" href="#">
			<h3 class="edia__title media__title--red">タイトル</h3>
			<div class="media__thumb"><img src="hoge.png" alt=""></div>
			<div class="meta">
				<span class="meta__date">2015/12/31</span>
			</div>
		</a>
	</li>
</ul>

こんな感じで小さいモジュールを見つけていくとBEMな書き方でも極端にセレクタが長くなることもないですし、小分けされたモジュールを各ページで再利用することができます。

まとめ

いかがでしたか?実際に時間がなかったりすると、よくないコードを踏襲してまた良くないコードを書いてしまうことが殆どです。リファクタに時間が取れればいいですけど、そうでないことが業務上殆どです。

なので、こういったことが起きないようにあらかじめ良くないコードは極力書かないように気をつけるのが良さそうですね。あとはしっかりとコーディング規約を作る!!これが大事です。

参考にさせていただいた記事もあるのでそちらも見ると勉強になりますよ!!

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法|Web Design KOJIKA17
CSS Architecture
メンテナブルCSS | 株式会社サイバーエージェント
BEMを参考にしたCSS設計 – Qiita

このブログでも他にもCSSのネタ書いています

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ