CSS設計マスターへの道！BEM, OOCSS, SMACSSスタイル診断クイズ - プレイ中

1 第1問

BEMにおいて、ブロック、要素、モディファイアを区切るために使用される記号はどれですか？

A アンダースコア (_)

B ダブルアンダースコア (__)

C ハイフン (-)

D ドット (.)

2 第2問

OOCSSの原則のうち、「構造とスキンを分離する」とは何を意味しますか？

A HTML構造をJavaScriptから分離する

B コンテンツとプレゼンテーションを分離する

C CSSファイルを構造とスキンで分割する

D データベースの構造とUIを分離する

3 第3問

SMACSSにおける「ベース」スタイルとは、どのようなスタイルを指しますか？

A 特定のコンポーネントに適用されるスタイル

B サイト全体のデフォルトスタイル

C JavaScriptによって動的に変更されるスタイル

D サードパーティライブラリのスタイル

4 第4問

BEMにおける「モディファイア」の役割は何ですか？

A ブロックまたは要素の構造を定義する

B ブロックまたは要素の外観や状態を変化させる

C ブロックまたは要素の配置を制御する

D ブロックまたは要素のコンテンツを定義する

5 第5問

SMACSSにおける「モジュール」とは、どのようなものを指しますか？

A サイト全体のレイアウト

B 再利用可能な、サイト固有のUIコンポーネント

C サードパーティ製のライブラリ

D HTMLの構造

6 第6問

BEMの主な目的は何ですか？

A CSSの記述量を最小限に抑えること

B CSSの再利用性と保守性を高めること

C CSSの実行速度を向上させること

D CSSの可読性を低下させること

7 第7問

OOCSSにおいて、クラス名を連結して使用する目的は何ですか？

A CSSの優先順位を上げるため

B スタイルを再利用し、組み合わせるため

C CSSの記述量を減らすため

D JavaScriptとの連携を容易にするため

8 第8問

SMACSSにおける「レイアウト」ルールは何を定義しますか？

A 個々のコンポーネントのスタイル

B サイト全体の構造と配置

C JavaScriptの動作

D アニメーション

9 第9問

CSS設計手法（BEM, OOCSS, SMACSS）の共通の目的は何ですか？

A CSSの記述量を減らすこと

B CSSの保守性、再利用性、可読性を高めること

C CSSの実行速度を向上させること

D CSSの学習コストを下げること

10 第10問

OOCSS (Object-Oriented CSS) の原則に最も合致する記述はどれですか？

A すべてのスタイルを `!important` で上書きする。

B 構造と見た目を分離し、再利用可能なモジュールを作成する。

C IDセレクタを多用して、詳細度を高く保つ。

D すべてのスタイルをインラインで記述する。