【HTML/CSS初心者向き】CSS設計も勉強するといい

2019/06/182023/09/25

当サイトのリンクには広告が含まれています。

Webサイトを作りたいとか、エンジニアを目指してまずはHTML、CSSから勉強している方も多くいるでしょう。

勉強していくとCSSが思った様に表示されないとか、１箇所変えたら変わらなくてもいいところまで変わってしまって、なんで〜！？と困った経験もあるのではないでしょうか？

私もかつてはそんな感じの一人でしたが、CSS設計について勉強したらコーディングがやりやすくなりました。

もっと早く勉強しておけばよかったと思ってますので、コーディングを仕事にしたい方や、フロントエンドエンジニアを目指して勉強している方は、HTML、CSSの基礎を終えたら早い段階で勉強することをオススメします！(1年前の自分にも言ってやりたい)

これからHTML、CSSを勉強するって方は先にこちらからどうぞ

CSSは設計が大事

CSSは１行書けば色が変わったり、線が表示できたりとプログラミングに比べたら誰でも簡単に書けてしまいます。

だからこそ、きちんと考えて書かないとページの量や枚数が増えていくとすぐにぐちゃぐちゃになる、実はとっても奥深い言語だと私は思います。（ベテランエンジニアは口を揃えてCSSは難しいと言う人が多い気がしますね）

紙のチラシなどと違ってWebサイトのメリットでもあり特徴でもあるのが、いつでも更新できること。この変えられるという特徴があるからこそ、HTML,CSSは変更に柔軟に対応できる必要があるのです。

それを踏まえて、より良い設計のゴールは以下４点（CSS設計の教科書より参考）

良いCSS設計

予測しやすい（期待通りに振る舞う）
再利用しやすい（機能ごとに分離されている）
保守しやすい（追加によって既存ルールを壊さない）
拡張しやすい（サイトが大きくなっても拡張しやすい）

CSS初心者がやりがちなこと

私もCSS設計について勉強する前は、ついついやってしまってたこと。

HTML構造に依存するCSS

以下の様にHTMLの構造に依存する書き方。

.hoge h2 { 
  color: #fff;
} 

.hoge2 ul li a {
  color: #222;
}

これでは、例えばh2がh3に変更になった時やulがolになった時に、HTMLとCSSの両方を変えなくてはならなくなります。

それぞれのタグにclassを付けてスタイルはそこに付ける様にすれば、HTMLのタグが変わってもCSSは書き直す手間が省け保守しやすくなります。

再利用ができていない無駄なCSS

上記の様な２種類のボタンが出てきた時に、無駄なCSSを書いてしまったこと。

.btn-a {
  border : 2px solid #000;
  border-radius : 30px;
  padding : 10px;
  text-align : center;
  background: #000;
  font-size : 20px;
  color: #fff;
}

.btn-b {
  border : 2px solid #000;
  border-radius : 30px;
  padding : 10px;
  text-align : center;
  background: #fff;
  font-size : 20px;
  color: #000;
}

背景と文字の色以外は共通に出来るのに、わざわざ2回も同じことを書いてしまい無駄が多い。仮にborder-radiusを0に変更にしたくなったら、２箇所変えなければいけなくなる。

ボタンの形を作るclassと見た目の色を付けるclassを分けることで、再利用のしやすいCSSになります。

取り消しのCSS

上記の様な見出しAを繰り返した後、見出しBが登場したので背景と下線を取り消して対応してしまった。

.heading {
  padding : 10px;
  border-bottom : 5px solid #707070;
  font-size : 40px;
  background : #F7F7F7;
  font-weight : bold;
}

.heading-b {
  background : none;
  border : none;
}

取り消すことでコードの量が増えますし、数が増えると無理やり取り消しや上書きを繰り返したりして、だんだんグチャグチャになっていきます。これではサイトが大きくなった時に拡張や改修を加えたい時に困ってしまいます。

定義したものを消すのではなく、追加していく様にすれば無駄な取り消しや上書きがなくなるのでいいですね。