デザインのカスタマイズ（2） 設計と部品

AFormsは、scssを編集してデザインをカスタマイズできるように作られています。
このシリーズでは、3つの記事に分けて、フォームのデザインをカスタマイズする方法を説明しています。

第2回の今回は、scssファイルの設計について説明し、そこで記述されている部品をご紹介します。

scssの設計（クラスの命名方法）

cssの設計方法というと「BEM」が有名ですね。
AFormsでは、BEMをお手本にした設計手法を使っています。ただし、記法は簡略化しています。
AFormsで使われているクラスは、「部品」「要素」「モディファイア」の3つです。

部品

HTML要素の大きな括りで、フォームはすべて部品で構成されています。たとえば「ボタン」とか「選択項目」とかです。大きいものだと「ウィザードナビゲーター」という部品もあります。

部品は、他の部品と関わらない（依存しない）ように慎重に分離されています。だから、ある部品のデザインを変更しても、他の部品に不必要な影響は出ません。

scssでは、部品にはwq-Nameというクラス名が付いています。wq-接頭辞の後が大文字です。

AForms 1.0.1では、下記17種類の部品があります。

• wq-Image：画像を表示する
• wq-TextInput：テキスト入力ボックス（1行）
• wq-TextArea：テキスト入力ボックス（複数行）
• wq-Checkbox：チェックボックス
• wq-Radio：ラジオボタン
• wq-Echo：入力されたデータを確認画面で表示する部品
• wq-Button：ボタン
• wq-InputGroup：入力コントロールを複数横に並べるコンテナ
• wq-Control：入力項目（ラベル、入力ボックス、注意書きとエラーメッセージをまとめたもの）
• wq-Option：選択項目の選択肢
• wq-Selector：選択項目
• wq-NavBar：ナビゲーションバー
• wq-WNavigator：注文情報の入力欄のコンテナ（ウィザード形式）
• wq-HNavigator：注文情報の入力欄のコンテナ（フロー形式）
• wq-Monitor：見積のリアルタイム表示
• wq-Attributes：お客様情報の入力欄のコンテナ
• wq-Form：すべてを含む祖先の部品

要素

部品の中のHTML要素です。たとえば「入力コントロールのエラーメッセージ」とか「見積表示の明細行」とかです。

特殊な場合を除いて、部品の要素には必ずクラスが付いています。
scssでは、部品の要素にはwq--nameというクラス名が付いています。wq-接頭辞の後にもう1つハイフンが来て、その後が小文字です。

モディファイア

部品の見た目や振る舞いを変更するためのクラスです。たとえば「主要なボタン」や「使用不可のチェックボックス」といった形で使われています。

scssでは、モディファイアにはwq-name-valueというクラス名が付いています。モディファイアの名前はカテゴリーを表すnameと状態を表すvalueの対になっています。

いくつか例を挙げます。

• wq-is-invalid：入力部品のモディファイアで、入力内容にエラーがあることを示します。wq-is-???は部品の状態を表すのに使われます。
• wq-type-primary：ボタンのモディファイアで、それが主要なものであることを示します。
• wq-gutter-mini：レイアウトコンテナのモディファイアで、小さい隙間で並べることを示します。

モディファイアにはもう1つ役割があります。それは、その部品がどこでどのように使われているのかを伝えることです。
いくつか例を挙げます。

• wq-belongs-address：その部品が住所入力欄に属することを示します。
• wq-for-zip：その部品が郵便番号の入力欄のためのものであることを示します。

上記のモディファイアは部品の独立性を保つのに役立っていて、実際のカスタマイズ作業でもこれらをうまく使うことが重要になってきます。