こんにちは！
ラフデザインのカンスケです。
今回は、CSS初学者の方向けに、「初心者がCSSを書く際に気を付けたいこと」というテーマで記事を書いてみたいと思います。
僕が初心者の頃に知っておきたかったことをテーマにしてみました。
Web制作やプログラミングを学ぶ方にとって、ほとんどの方が最初に学習するのが「HTMLとCSS」この2つだと思います。
この2つは厳密に言うとプログラミング言語ではなく、割と直感的にコードを書くことができる為、初学者の方でも少し勉強すればなんとかサイトの見た目は作ることができる！というレベルまで到達することができます。
しかし、このように「敷居が低い＝簡単」ではないことに注意してください。
今回取り上げるCSSも、敷居は低いかもしれませんがとても奥が深いものです。
プロパティの種類は全て把握することができないほど非常に数多く存在します。
「CSSは簡単」という人のコードを見てみると、非常に保守性が低く管理しづらいコードを書いていることが往々にしてあります。そのようなコードはできるだけ書きたくないですし、修正もしたくないですよね。
しかし、初学者が最初に触れやすいProgateやドットインストール等の学習教材では、「こんなコードを書いてはいけません」と言ってくれることはほぼありません。サービスの目的がそこではないので仕方ないですね。
そこで今回は、初学者の方に特に気を付けてほしいことを少しだけ、「基本のキ」としてお伝えしたいと思います。
それでは、前置きが長くなりましたがいってみましょう。
この記事の目次
保守性が低く管理しづらいコードとは
さて、そもそも「保守性が低く管理しづらいコード」とはなんなのか。
一言でいうと、後から修正する際に修正の難易度が高い、または修正不可能なコードのことです。
Webサイトは作って終わりではなく、作ったあとも機能の追加や変更、レイアウトの変更等、様々な変更・修正が発生します。
その際、CSSを修正しないといけないことはよくありますが、このときにCSSが”破綻”していては、修正に膨大な時間がかかってしまいます。
そんなコードは書くのも見るのも避けたいですよね。
これだけはやめよう
では本題です。ここからは僕がコーディング初心者の頃に知っておきたかったこと、今サイトの修正をする際に絶対に出会いたくないコードを、ほんの一部ご紹介します。
まずはこれだけはやめておいたほうがいいかもしれません。
①：IDセレクタの乱用、およびスタイルの適用
HTMLのタグにはIDセレクタをつけることができますが、IDセレクタを無闇に使うこと、またIDセレクタにスタイルをあてることは極力やめましょう。
（例）
<div id="menu" class="page-menu">
.
.
</div>#menu{
padding-top:20px;
padding-bottom:40px;
}
.page-menu{
padding-top:10px;
padding-bottom:10px;
}この例では、既に「id="menu"」が指定されているので、特定の条件下で指定したい場合の「page-menu」というクラスは反映されません。
CSSには詳細度というものがあり、スタイルがあたる優先度の高さが存在します。
詳細度については以下が参考になります。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
IDはこの優先度がclassよりも高い為、IDにスタイルがあたっていると、classでスタイルを上書きすることは基本的にできなくなります。
IDは、ページ内リンクやJavaScriptでの使用に留めておいた方が吉です。
②：「!important」の使用
先ほどのように、IDセレクタにあてられた優先度の高いスタイルを上書きするには、さらに優先度の高い「!important」を使うと上書きできてしまいますが、基本的にはこの「!important」は悪手とされていますのでやめましょう。
（例）
<div id="menu" class="page-menu">
.
.
</div>#menu{
padding-top:20px;
padding-bottom:40px;
}
.page-menu{
padding-top:10px !important;
padding-bottom:10px !important;
}
このように、!importantを使うとIDに指定されたスタイルをclassでも上書きできますが、仮にこの「page-menu」をさらに上書きしたい場合があると、さらに!importantを使用することになり、結果CSSが崩壊します。
!importantを使わずに済む方法を先に探し、本当にどうしようもない時以外は使うことをやめましょう。
③：意味のわからないclass名の付与
意味のわからないclass名の付与は、読み解くことに時間がかかってしまい、修正の難易度が上がる恐れがあります。
たまにあるのが、「c1」や「c2」など、明らかにただ番号を振っているようなclass名です。
（例）
<div class="c1">
.
.
</div>
こういったclass名は規則性がなく意味もない為、コードが多くなってくると読み解くことにかなり時間をとられてしまいます。
class名の付与ルールはできればある程度決めておき、可読性が高く一貫性のあるコードを書くよう心がけましょう。
さいごに
今回はほんの一部をご紹介しましたが、CSSにはここでは触れきれないことがまだまだたくさんあります。
それだけCSSは奥が深く、難しいものです。僕もまだまだ勉強中です。
保守性の高いコードを書いて、一緒に世界を平和にしましょう。
