CSSを書くとき気をつけていることってありますか？
CSSは、簡単にかけてしまいますが、奥が深い…難しい…
なにも考えず書けば、誰でもサラサラかけてしまうCSSですが、あとの管理のことを考えると…
webサイトは生き物なので、日々更新や修正があったり、一部のリニューアルなどが入ってきます。
その際にルール化されていないとCSSは破綻してしまいます。
ここでは僕CSSを書く際に気をつけていることをサラサラっと紹介します。
CSS記述の際に気をつけているポイント
ではいってみよう！っとその前に！！
なぜCSSは破綻してしまうのか。を見ていきましょう！
CSS破綻の原因
呼び方の強さが存在する
CSSは書く順番や!importantなどで優先される順番が変わってしまいます。
既にCSSを書いているのにもう１度指定して上書きしてしまっていたり、マルチクラスで複数指定している場合どうなるのか自分でもわからないと言うことになってしまいかねません。
自分で理解していたとしても、それは第3者が見たときにわかりやすいかも鍵になってきます。
またCSSは親要素にかけたつもりでも小要素に継承してしまう場合があります。
意図しないところで意図しない設定が入ってしまうので、CSSを書く際には注意が必要です。
ではここからは実際に僕が注意していることを紹介します。
超基本だと思うこと！
わかり易い名前をつける
自分を全て永遠に管理する！ならいいですが、そんなことはほぼなく・・・
id,classのお話です。
idやclassを付ける時テキトーな名前をつけていませんか？
id名,class名をみるだけである程度何のCSSを書いてあるのか分かる名前がベストだと僕は考えています。
【例】
ヘッダーなら『#header』
ヘッダー内のh1タグなら『h_h1』など
さらにコメントアウトを使って何のCSSなのか書いておくと誰がみてもわかりやすいですよね？
命名規則をしっかりとしたBEMなんかを取り入れるのも良いかもしれません。
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{
}
↑こういう状態
『!important』をなるべく使わない
最優先で他のCSSを無視して変更してくれますが、使いすぎると管理が難しいものの１つです。
なるべく使わないようにCSSを組みましょう。
「!important」だらけになるともう取り返しが付きません。
たまに修正依頼をいただくと「!important」祭り！
＼(^o^)／とりあえず・・・「!important」というさらなる「!important」祭りになることも…
とりあえずこんな感じです！
他に何か思いついたら随時更新していきますね！
CSSをある程度理解したら、下記の書籍がおすすめです。
破綻しないCSSを書けるようになりましょう！
「web制作の勉強にオススメの書籍を紹介します！」
