Skip to main content

css architecture

[CSS設計における3大メソッド][https://www.risewill.co.jp/blog/archives/5652]

CSSの設計についてまとめていく

  • OOCSS（Object Oriented CSS）:オーオーシーエスエス
  • BEM（Block-Element-Modifier）:ベム
  • SMACSS（Scalable and Modular Architecture for CSS）:スマックス

css 設計が大事な理由

一定のルールがないと、コーダー各々が違う考え方でスタイル付けをして余計なCSSが増えてしまったり、本人でなければ分からないルールが発生してしまい、メンテナンスがしにくくなる。 そのため以下のことを強く意識してCSS設計を行うことが大切と言われている。

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

css 代表的設計​

BEM（Block-Element-Modifier）：ベム​

BEMではBlock,Element, Modifierの3つに分離して考え、これらのみでクラスを命名することでクラス名を悩むことがなくなる。 イメージとしてはコンポーネント指向と似ている感じがする。そのためReact, Vueなどには合うのではないだろうか

デメリット クラス名が冗長になる。すべての要素にクラス名を付与するためHTMLが読みにくくなる。 BootstrapはOOCSSを採用しており、BEMとの相性がいいとは言えない。

  • 命名規則が統一されていれば得るメリット ・クラスの命名が簡単になる CSSの設計については命名規則が最も難しいとされている。そのため設計になぞった実装をすることは不可欠である。

・要素の再利用がしやすくなる。 共通の要素を別の場所で再利用仕様としても、要素がHTMLに依存していると同じCSSを

以下は記入した記事

グローバルセレクターを避ける​

グローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例を示します。

詳細度が高すぎるセレクターは使わない​

セレクターの詳細度を低くしておくことは、軽量で再利用・メンテナンス可能なCSSを作成する秘訣の1つ。

/* Specificity of 0,0,1 */
p {
  color: #222;
  font-size: 12px;
}

/* Specificity of 0,1,0 */
/* .errorを適用すればいいため汎用性があがる。 */
.error {
  color: #a00;
}

/* p.error {  これはNG
  color: #a00;
} */

クラスをチェーンしない​

クラスセレクターのチェーンも避けてください。.message.warningといったセレクターの詳細度は「0，2，0」です。詳細度が高くなるとオーバーライドしにくくなるだけでなく、チェーンはしばしば副作用の原因にもなります。次の例を見てください

HTML初心者が知っておくべきリセットCSSと3つのポイント​

  1. ポイント1

ブラウザごとにデフォルトのCSSは異なる。これは覚えておく。

  1. ポイント2

CSSリセットする場合は必ず一番最初にリセットの設定を書いて下さい。何故ならば『CSSは上書きができる』ので、同じ設定であれば後から書かれたものが優先されるから。

ユニバーサルセレクタを扱うリセットは避ける

*{
   margin : 0;
   padding : 0;
}
  • ←こいつはユニバーサルセレクタと呼ばれるもので、HTMLのすべての要素を選択していることになります。つまりこれを使うことで『一番最初にすべての要素をリセットしてしまえる』という訳です。ところがこの手法には下記デメリットが存在することが明らかになりました。

ブラウザのレンダリングが若干遅くなる 良いスタイルもすべてリセットされてしまう リセットしたままだとフォームの部分で表示がずれてしまうブラウザがある

「ブラウザのレンダリング速度」ですが、最近のPCは基本性能が上がっていますしブラウザ自体の処理速度も向上してますので「ユニバーサルセレクタを使うと遅くなる」といっても体感的にほとんど差は感じられないと思います。ただし、スペックの低いPCや古いブラウザを使っている場合、あるいは携帯のフルブラウザやスマートフォンから閲覧する場合はレンダリングの遅さが顕著に表れる場合があるので十分に注意する必要があります。

  1. ポイント3

よく使われるリセット手法を把握する。

Last updated on