こんにちは。

今日はいつもと違って、読んだ本のアウトプットをしようと思います！

「CSS設計の教科書」を読んでみた

本の名は「Web制作者のためのCSS設計の教科書」です＾＾

緑色で割と有名な本ですね！（ピンク色のSassの本も有名です）

内容的にはWeb制作者にとって目指すべきCSSの書き方について書かれています。

ある程度HTML、CSSがわかってきた人におすすめかと思います！

では、内容について書いていきます。

目指すべきより良いCSSの書き方とは
破綻しやすいCSSの書き方とは

目指すべきより良いCSSの書き方とは

より良いCSSの書き方として、4つ挙げられています。

①予測しやすい
②再利用しやすい
③保守しやすい
④拡張しやすい

それぞれ簡単に解説します。

①予測しやすい

クラス名を見るとどんな装飾か予想しやすい

ルール同士が影響を与えないこと

②再利用しやすい

クラスを使い回ししやすいように設計している

再度同じようなUI（デザイン）に遭遇した時に書き直す必要がないようにする

③保守しやすい

修正しやすい（ex.１箇所でも書きかえたら壊れないように）

追加したルールによって既存のルールを壊さない

④拡張しやすい

プロジェクトに関わる全ての人にとってメンテナンス・管理がしやすい

サイトの規模が大きくなるにつれて拡張しやすいように

（ex.同じようなボタンが追加された時少ないコードで済むように）

この4つを意識してCSSを書くようにすればいいというわけですね＾＾

では、逆に避けるべき書き方についてみていきましょう！

破綻しやすいCSSの書き方とは

単純に書くだけであれば簡単なCSSですが、運用をしていくとなると扱いが難しいです。

簡単であるが故に誰でも自由にかけて、その場限りの見た目をつくることもできるからですね。

そういった理由でコードが破綻してしまうことがあります。

文字が可変したら、文字サイズが変わったら、と考えながらコードを書くのが難しいなと私自身日々感じています(^^;

では破綻しやすいCSSの例をみていきましょう！

HTMLの構造に依存している

デザインは後に変わることがあり、項目が新たに追加されたりします。

なので見出しが<h2>であったものが<h3>になることも…

この場合例えばCSSで

.contSect h2 {
  color: red;
}

という指定の仕方をしているとHTMLが変わると<h2>から<h3>へCSSも書き直す必要が出てきます。

解決策としては、あらかじめクラスを使ったマークアップにしておくことです！

そうすれば仮に先ほどのような変更があってもCSS側は変更する必要はなくなります＾＾

わたしはマークアップの時点で大体の要素にクラスをふるようにしています(^○^)

スタイルを取り消している

スタイルの取り消しというのは一度設置したルールを0やnoneといった値でリセットすることを指します。

例えば、下線がついた見出しのデザインがあるとします。

.title {
  border-bottom: 3px solid #fcba03;
  margin-bottom: 1em;
  padding: 10px 15px;
  font-size: 2rem;
  font-weight: bold;
}

後に下線がつかない見出しが出てきて、クラスを使い回しするために新たに【no-border】というクラスをつくり、２つともクラスをふります。

<h2 class="title no-border">見出し</h2>

.no-border {
  padding-bottom: 0;
  border-bottom: none;
}

これがスタイルの取り消しですね。

この方法ではなく、下線を追加するためのルールをつくり、クラスをあてます！

.headline {
  padding-bottom: 10px;
  border-bottom: 3px solid #fcba03;
}

消して、消して…よりは

最低限のベースをつくり、その上に装飾を載せていくと破綻しにくいということですね＾＾

単位に絶対値を使用している

文字サイズなど、px指定せずにemやremなどの相対値を使用した方が良いです。

アクセシビリティの面からみても！

今日は時間がきてしまったのでここまで〜〜

【本レビュー1-1】CSS設計の教科書