CSS設計の達人度チェック！BEM/OOCSS/SMACSSクイズでスタイルの腕前を試そう🔥 - プレイ中

1 第1問

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

A block-name__element-name--modifier-name

B block-name

C blockNameElementModifier

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 HTML要素のデフォルトスタイルを定義する

C JavaScriptによる動的なスタイル変更を定義する

D サイト全体のレイアウトを定義する

4 第4問

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

A element-name

B block-name__element-name

C __element-name

D blockName_elementName

5 第5問

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

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

B サイト全体の主要なセクションを定義する

C HTML要素のデフォルトスタイルを定義する

D JavaScriptによる動的なスタイル変更を定義する

6 第6問

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

A Blockの構造を定義する

B BlockまたはElementの外観や状態を変化させる

C JavaScriptの動作を定義する

D HTML要素の基本的なスタイルを定義する

7 第7問

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

A 再利用可能なUIコンポーネントのスタイルを定義する

B サイト全体のレイアウトを定義する

C HTML要素のデフォルトスタイルを定義する

D JavaScriptによる動的なスタイル変更を定義する

8 第8問

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

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

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

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

D CSSの記述を簡単にする

9 第9問

BEM命名規則において、Block、Element、Modifierを区切るために推奨される記号は何ですか？

A アンダースコア（_）

B ハイフン（-）

C ドット（.）

D スラッシュ（/）

10 第10問

OOCSS (Object-Oriented CSS) の主な目的は何ですか？

A CSSファイルのサイズを最小限に抑えること

B 再利用可能で柔軟なCSSを作成すること

C CSSアニメーションを簡単に実装すること

D 特定のブラウザでのCSSの互換性を確保すること