初心者にありがちなCSSの書き方と、その書き方を止めたほうが良い4つの理由 | Garney.Web

初心者にありがちなCSSの書き方と、その書き方を止めたほうが良い4つの理由

スポンサーリンク

02151208_1

初心者だった頃、自分が作ったHTMLのコードやCSSのコードを見ているとそれはそれは酷いものだった。例えば、HTMLファイルの中にCSSやJavaScriptのコードを書いたりするとか。その1ファイルで完結してしまっているのだ。ようこんなんでやって来たなと・・・。
今も酷いけど、昔の方が100倍酷い。けどそう思えるのはスキルアップしたって事だよな・・・良いことだ。
滅多に昔のコードを見ることはないけど、たまに見てみるのも良いのかも知れない。

styleタグの中にCSSを書いてしまう

CSSの書き方は幾つかあるがその1つとしてHTMLファイルの中で

</p>
<p>&lt;style&gt;<br />
.body{<br />
font-size:14px;<br />
}<br />
&lt;/style&gt;</p>
<p>

などとして書くことができる。styleタグで囲えばその中でCSSが扱えるようになるんだけど、これは止めた方が良い。
だってさCSSってかなり長くなる。それをHTMLファイルの中に全部書いちゃうとファイルが長くなりすぎて、目的のコードまで容易に辿り着くことが出来なくなってしまう。HTMLコードを触りたいのに目的の箇所までどれだけスクロールしないと辿りつけないか計り知れない。

目的の箇所までたどり着いた時には燃え尽きているかも知れない。それだけで今日の作業を終えたくなる。ソース内検索すれば良いやんって意見もあるかもしれないけど、別に検索しなくても良いのに検索しないといけないことが面倒だ。

また今回はCSSにフォーカスしているけど、styleタグに限らずscriptタグを用いればJavaScriptコードを直接書くこともできる。これもダメね。同じ理由で。

初心者のうちはこの様な書き方をしてしまう。だって簡単なんだもん。いちいちCSSファイル作らなくても良いもんね、面倒くさくない。でもこれが後々面倒になる要因の一つになろうとは初心者のうちは知る由もないのだ。

タグに直接CSSを書いてしまう

CSSの書き方のもう1つの方法はタグに直接書くことができるインラインスタイルシートだ。これも便利なんだなあ。でも麻薬が如し。これも可能な限り使わない。自分は絶対使わない。使用例を見てみよう。

</p>
<p>&lt;div class=&quot;wrapper&quot; style=&quot;margin:10px;padding-top:10px;&quot;&gt;</p>
<p>麻薬スタイルシート</p>
<p>&lt;/div&gt;</p>
<p>

止めておけ。これも初心者のうちはやってしまいがち。ちょっとした修正の時についついCSSファイルを開いて訂正するのが面倒だからホンの出来心で書いてしまう。出来心どころか疑問さえ思わず書く。

インラインスタイルシートのダメな所は2つある。

メンテンナス性が下がる

メンテナンス性ダウンだ。この様に書いてしまうと後で修正したい時に何処に書いてあるか解らなくなる。人は直ぐに覚えていたことを忘れてしまう。その時はどこに書いたか覚えていたとしても別の作業をしていると数時間後には忘れている。

このmarginはどこに書いたんだっけかと想い出すのに一苦労する。CSSファイルにも書いているとそっちを探したりHTMLファイルに書いたインラインスタイルシートを探したり、またstyleタグ内でCSSを記述しているならばそこも探したりと修正箇所を見つけるのに手間取ってしまう。

またCSSスタイルをどこに書いたか手っ取り早く調べるのにGoogle Chrome等のブラウザのデベロッパーツールを使うと分かりやすい。例えばこのブログではこんな感じ。

20160205_1

青くフォーカスされている箇所はどのようなCSSが指定されているのか赤枠で囲った所にでるのだ。分かりやすい!
そしてこの赤枠内の右上。見にくいだろうけど、ここにどのCSSファイルの何行目に書いたか一目瞭然になるのだ。

しかし、インラインスタイルシートの場合はこれが出ない。画像の赤枠上にelement styleと書かれた箇所があるが、ここに表示される。
ここに表示されたCSSはインラインスタイルシートであるヒントにはなる。しかし一方でJavaScript側でCSSを操作した場合もここに出るため混乱を招くのだ。

スタイルの優先順位が高い

CSSにはスタイルの優先順位がある。

</p>
<p>インラインスタイルシート使っちゃダメ</p>
<p>/*優先順位 1*/<br />

<br />
*{font-size:12px;}/*優先順位 5*/<br />
p{font-size:14px;}/*優先順位 4*/<br />
.test{font-size:16px;}/*優先順位 3*/<br />
#text{font-size:18px;}/*優先順位 2*/<br />

こんなサンプルコードを書いてみた。このp要素に対して適応されるフォントサイズはどれだろうか。答えは20pxだ。
インラインスタイルシートで書くとこの様に優先順位がかなり高くなってしまう。後でここのスタイルを変更したい場合やスタイルの上書きをしたい時にCSSファイルから操作しにくくなってしまう。

例えばclass=”text”が複数あったとして、全てにfont-size:12pxに指定したい場合どうだろうか。

</p>
<p>インラインスタイルシート使っちゃダメ</p>
<p>インラインスタイルシート使っちゃダメ</p>
<p>インラインスタイルシート使っちゃダメ</p>
<p>インラインスタイルシート使っちゃダメ</p>
<p>インラインスタイルシート使っちゃダメ</p>
<p>

こんな感じで。一番上のp要素以外はCSSでtestクラスに対してfont-size:12px;とすれば良いし、普通ならばそれで済む。なのに一番上のp要素だけはインラインスタイルシートの優先順位によって適応されない。あぁ困った。そこで初心者はこうする。

必殺!importantは絶対やめよう

<br />
.text:font-size:12px !important;<br />

そう、!importantだ。これを使用すれば優先順位を無条件に一番高くすることができるのだ!うわぁ便利!
でも絶対やめておけ。これが後に首を締めるのだ。絞め殺されるのだ。CSSはスタイルの上書きが可能だ。優先順位が同じであればファイルの上の方に書いたスタイルよりも下に書いたスタイルを優先する。

</p>
<p>importantダメゼッタイ!</p>
<p>

<br />
.text{<br />
font-size:12px;<br />
}</p>
<p>.large-text{<br />
font-size:20px;<br />
color:#ff0000/*赤色*/<br />
}<br />

この場合は20pxが適応される。このように後から上書きしたい場合が出てくる。でも!importantで優先順位を一番高くしてしまったばっかりにこれが出来なくなってしまってピンチに陥るのだ。例のコードではシンプルだしコードもめちゃくちゃ短い。でも実際は何百行も何千行も書く場合もあるのに!importantで縛ってしまうと、思ったようにスタイルが書けなくなってしまう。importantを乱用したばっかりに元の一番影響の低いスタイルがどこにあるのかも解らなくなってしまうのだ。

1階層にスタイルを全部書いてしまう

最後はこれCSSは適応されるスタイルに優先順位があると書いたが

</p>
<p>&lt;div class=&quot;box1 box&quot;&gt;</p>
<p>テキスト</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;box2 box&quot;&gt;</p>
<p>テキスト</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;box3 box&quot;&gt;</p>
<p>テキスト</p>
<p>&lt;/div&gt;</p>
<p>

<br />
.text{<br />
font-size:12px;<br />
color:#222;<br />
line-height:1.5;<br />
}<br />

こんな書き方。これ使い方によっては別に良いんだけど、例えばbox2のtext別に12pxじゃなくても良いとなると困る。各div要素には共通のclassであるboxがあるのだから

<br />
.box .text{<br />
font-size:12px;<br />
color:#222;<br />
line-height:1.5;<br />
}<br />
.box2 .text{<br />
font-size:14px;<br />
}<br />

こうしておけば良い。優先順位によってbox2クラスのtextクラスはfont-size:14px;になる。また.textというクラスはマークアップしていると幾らでも使いそうだ。このような書き方をしているとうっかり.textクラスを別の所に書いた場合そこにも適応されてしまう。それを防ぐ為にもCSSの階層を深くしておくと良い。

必ずしもそうではないけど、なるだけ抽象的な名前のクラスは多階層にして記述しておく。あるいは.textクラスはfont-size:12px;にスタイルを適応するものだとパーツとして使うのであればこの限りではない。

textとして指定すると全ての要素が12pxになるので良いのであれば

<br />
.text{font-size:12px;}<br />

この書き方は寧ろ便利に作用する。まあ用は設計をどうるかによって選択する部分なんだけど、そうじゃなくて初心者の間はとにかく全部1階層に書くことが多いから止めておこうって話。

自分も初めはこんなんだったけど失敗の繰り返しで勝手に覚えてきたのだ。これらの書き方を止めるだけでもCSSのメンテナンス性は上がるし是非覚えて欲しい。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法