フロントエンド初心者に知ってほしい、CSS運用における3つの考え方(1/2)

2 min read読了の目安(約2600字

この記事で学べること

  • 破綻しやすいCSSは、どういうものか?

読んでほしい人

  • 今までバックエンドメインで、フロントエンドはほぼ触ったことがない人
  • style = '*' と、スタイルをインラインで書いている人

参考にした書籍

https://www.amazon.co.jp/gp/product/B07PS1ZJN6/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1

https://www.amazon.co.jp/Web制作者のためのCSS設計の教科書-モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法-Web制作者のための教科書シリーズ-谷-拓樹-ebook/dp/B00M0ESXUI/ref=sr_1_8?__mk_ja_JP=カタカナ&dchild=1&keywords=css&qid=1617342017&sr=8-8

この2つの書籍を元にまとめました。(ほぼ要約に近い)
とてもわかり易く、まとめられているので、おすすめです。

破綻しやすいCSSとは?

単純に書くだけなら超簡単。
だが、運用していくとなると、扱いが非常に難しい。

その場限りでそれらしい見た目を作ると、コードを破綻させてしまう。
これは本当によくやってしまう。。。

HTMLの構造に依存している

❌ h1, pなど、タグでルールを定義している
⭕ class, idを使ってルールを定義する。

絶対値を多用している

❌ px
⭕ em, %

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

  • 例:下線つきの見出しのデザインがあり、その下線を取り消したい場合
  • 元々定義されているルール
    .title {
      border-bottom: 2px solid #000;
      margin-bottom: 1em;
      padding: 10em;
      font-size: 24px;
      font-weight: bold;
    }

❌ 「取り消す」ためのルールを追加。

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

⭕ 「追加する」ためのルールを追加。

    .title {
      margin-bottom: 0.5em;
      font-size: 2em;
    }

    .headline {
      padding-bottom: 10px;
      border-bottom: 2px solid #000;
    }

CSSセレクタと詳細度

詳細度が高い = 適用される優先順位が高い

詳細度高い
|	!important	
|	インライン記述(style属性)
|	IDセレクタ
|	クラスセレクタ・属性セレクタ・疑似セレクタ
|	要素セレクタ、疑似要素
|	ユニバーサルセレクタ
詳細度低い

!important

基本的に避けたい記述。

インライン記述

状況によるが、基本的に避けたい記述。

IDセレクタ

基本的に避けたい記述。
ただし、避けたいのはCSSのルール定義での話。
HTML内のaタグとしての利用は、進んで使いたい。

クラスセレクタ

一番メンテナンスしやすいセレクタ。

例、IDセレクタと比較した場合

  • IDセレクタの場合
    マークアップ & CSS の変更が必要

  • クラスセレクタの場合
    マークアップだけ変更が必要

擬似クラスセレクタ

セレクターに付加するキーワードのこと
例、hover

属性セレクタ

/* https://example.orgと一致する <a> 要素。 */
a[href="https://example.org"] {
		color: green;
}

要素セレクタ

/* すべての <a> 要素。 */
a {
  color: red;
}

ユニバーサルセレクタ

基本的に避けたい記述。

  • 理由
    • ブラウザのレンダリングが遅くなる。
    • 良いデフォルトのCSSをリセットしてしまう。
    • フォームの表示がおかしくなるブラウザがある

※一昔前は、プロジェクトの初期スタイルをリセットする目的で使われていたらしい

/* すべての要素対象。 */

* {
  margin: 0;
  padding: 0;
}

いかに少ない工数でメンテナンス効率を下げずに改修ができるか?、
CSSフレームワークを導入するべきか?

この2点については、後編でまとめたいと思います。