🎨

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

2021/05/29に公開

CSS

HTML

tech

この記事で学べること

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

読んでほしい人

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

参考にした書籍

この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;
}

ユニバーサルセレクタ