CSS設計マスターへの道！BEM, OOCSS, SMACSS あなたはどれだけ知ってる？【エンタメクイズ】 - プレイ中

1 第1問

BEMにおけるBlockの命名規則として正しいものはどれですか？

A blockName_elementName--modifierName

B block-name__element-name--modifier-name

C blockName__elementName_modifierName

D block_name--element_name__modifier_name

2 第2問

OOCSSの原則のうち、構造と見た目を分離する原則は何と呼ばれますか？

A Separation of Concerns

B Separation of Structure and Skin

C Don't Repeat Yourself

D Single Responsibility Principle

3 第3問

SMACSSにおけるBase Rulesの役割は何ですか？

A 特定のコンポーネントのスタイルを定義する

B サイト全体のデフォルトスタイルを定義する

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

D 特定の状態におけるスタイルを定義する

4 第4問

BEMにおけるElementの役割は何ですか？

A Block全体の状態を表す

B Blockを構成する一部分を表す

C Blockのレイアウトを定義する

D Blockのテーマを定義する

5 第5問

SMACSSにおけるModuleとは何を指しますか？

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

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

C JavaScriptのライブラリ

D サーバーサイドの処理

6 第6問

BEMにおけるModifierの役割は何ですか？

A Blockの基本的な構造を定義する

B BlockまたはElementの外観や振る舞いを変更する

C Block間の関係性を定義する

D Blockのコンテンツを定義する

7 第7問

OOCSSの原則に基づき、グリッドシステムを構築する際に重要なことは何ですか？

A 特定のコンテンツに依存したグリッドを構築する

B コンテンツに依存しない、再利用可能なグリッドクラスを構築する

C JavaScriptで動的にグリッドを生成する

D CSS Gridを使用しない

8 第8問

SMACSSにおけるState Rulesの役割は何ですか？

A サイト全体のデフォルトスタイルを定義する

B 特定のコンポーネントの基本的なスタイルを定義する

C 要素の状態（hover, active, disabledなど）に応じたスタイルを定義する

D JavaScriptによって動的に変更されるスタイルを定義する

9 第9問

BEM, OOCSS, SMACSSに共通する目的は何ですか？

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

B CSSの再利用性、保守性、拡張性を高める

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

D CSSをJavaScriptで制御する

10 第10問

OOCSS (Object-Oriented CSS) の原則において、構造と見た目を分離する主な目的は何ですか？

A CSSファイルのサイズを小さくするため。

B スタイルを再利用可能にし、変更の影響範囲を局所化するため。

C 特定のブラウザでの表示を最適化するため。

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