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

1 第1問

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

A blockName__elementName--modifierName

B block-name

C blockName_elementName_modifierName

D .block_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 レイアウトに関するスタイルを定義する

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

4 第4問

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

A blockName--elementName

B element-name

C blockName__elementName

D blockName_elementName

5 第5問

OOCSSの原則のうち、繰り返し使用される視覚的なパターンをクラスとして定義する原則は何と呼ばれますか？

A Structure and Skin

B Objects

C Themes

D Layouts

6 第6問

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

A blockName__elementName--modifierName

B blockName--modifierName

C blockName_elementName_modifierName

D modifierName

7 第7問

SMACSSにおけるState Rulesの役割として最も適切なものはどれですか？

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

B レイアウトに関するスタイルを定義する

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

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

8 第8問

BEM, OOCSS, SMACSSに共通する目的として最も適切なものはどれですか？

A JavaScriptのコードを整理する

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

C HTMLの構造を最適化する

D サーバーサイドの処理を高速化する

9 第9問

BEMにおいて、ブロック、要素、モディファイアの命名規則の区切り文字として正しい組み合わせはどれですか？

A ブロック__要素--モディファイア

B ブロック--要素__モディファイア

C ブロック__要素_モディファイア

D ブロック__要素--モディファイア

10 第10問

OOCSSの原則に基づき、スタイルを構造とスキンに分離することを推奨する主要な目的は何ですか？

A JavaScriptのコード量を削減するため

B CSSの再利用性とメンテナンス性を向上させるため

C HTMLの構造を簡略化するため

D ブラウザのレンダリング速度を向上させるため（直接的な効果は小さい）