CSS記述の際に気をつけているポイント
今回は個人的にCSSを書く際に気をつけていることを紹介します。
CSSやHTMLは慣れていればサラサラと書けてしまいますが、慣れていても後で別の人が編集したりデザイン変更が出た際に変更しやすいようにしておくべきです。
CSSの管理についてはなかなか頭を悩まされますが、今回は少しでも管理しやすいように個人的に心がけていることをまとめました。
ではいってみよう！っとその前に！！
なぜCSSは破綻してしまうのか。を見ていきましょう！
CSS破綻の原因
呼び方の強さが存在する
CSSは書く順番や!importantなどで優先される順番が変わってしまいます。
既にCSSを書いているのにもう１度指定して上書きしてしまっていたり、マルチクラスで複数指定している場合どうなるのか自分でもわからないと言うことになってしまいかねません。
またCSSは親要素にかけたつもりでも小要素に継承してしまう場合があります。
意図しないところで意図しない設定が入ってしまうので、CSSを書く際には注意が必要です。
ではここからは実際に僕が注意していることを紹介します。
超基本だと思うこと！
わかり易い名前をつける
自分を全て永遠に管理する！ならいいですが、そんなことはほぼなく・・・
id,classのお話です。
idやclassを付ける時テキトーな名前をつけていませんか？
id名,class名をみるだけである程度何のCSSを書いてあるのか分かる名前がベストだと私は考えています。
【例】
ヘッダーなら『#header』
ヘッダー内のh1タグなら『h_h1』など
さらにコメントアウトを使って何のCSSなのか書いておくと誰がみてもわかりやすいですよね？
CSSの指定ごとにまとめて書く
ヘッダーならヘッダーの記述しているものをまとめて書こう。
ある程度書いたことがある人はやっていませんが、初心者でたまにありがちなのが、ヘッダーのCSSを書くのにフッターのあとに書いちゃったりするあれです！
どこでも書いとけばええんやろ！的なノリでは書かないようにしましょう。
プロパティの記載する順番を統一
どういうこと？となった方もいると思うので実際に書いてみます。
.h_h1{
padding: 20px;
height: 25px;
border-bottom: 1px solid #000;
width: 100%;
}
.h_h2{
width: 100%;
height: 15px;
padding: 10px;
border-bottom: 1px solid #000;
}.h_h1{
width: 100%;
height: 25px;
padding: 20px;
border-bottom: 1px solid #000;
}
.h_h2{
width: 100%;
height: 15px;
padding: 10px;
border-bottom: 1px solid #000;
}いかがでしょう？
表示的には全く同じものになりますが、ソースで見たときに見栄えが全然違いますよね？
このようにプロパティの順番を統一することでよりわかりやすいソースになります。
空のルールを残さない
CSSを書いているとプロパティのない空の状態の物が残ってしまう場合があります。
これは表示的には意味がありませんがファイルサイズが大きくなってしまう原因になるので必ず消しておきましょう。
【例】
.h_h2{
}
[/css]
↑こういう状態
『!important』をなるべく使わない
最優先で他のCSSを無視して変更してくれますが、使いすぎると管理が難しいものの１つです。
なるべく使わないようにCSSを組みましょう。
とりあえずこんな感じです！
他に何か思いついたら随時更新していきますね！
コメント