基本的なマークアップ
オブジェクトの基本構造は以下の通りです。
object>component, layout
に属するオブジェクトはdiv, section, article
等の、フローコンテンツでグループ化します。これは両者が「複数のオブジェクトを包括する」という特性を持つためです。
要素の閉じタグの後ろには、コメントでクラス名を付与するのが望ましいです。複数ある場合はすべて書くことは避け、識別しやすい代表的なものを書きます。
インデントはHTML・SCSSともにスペース4個を採用していますが、プロジェクト内で統一されていればこの限りではありません。
<div class="c-example">
<div class="c-example-inner">
<h2 class="c-example-title">c-exampleオブジェクト</h2>
...
</div><!-- /.c-example-inner -->
</div><!-- /.c-example -->
クラス命名規則
接続子
echo.cssのCSSクラスの命名規則は、SMACSSを参考にしています。
Scalable and Modular Architecture for CSS
デフォルトの接続子は以下の通りです。常にハイフン1個のみで連結します。
.prefix-(contentsName-)block-element-modifier
echo.cssのカード型オブジェクトの、文章が入る箇所のクラス名は以下のとおりです。カード型オブジェクトは component
グループに属しているため、接頭辞は c-
となります。
.c-card-contents
親オブジェクトのクラス名
極力、一単語で命名します。 mainvisual
など、つなげて記述しても理解しやすいものは、一単語とすることを許容します。
やむを得ず二単語になる場合は、 eventCalendar
のようにキャピタライズで記述します。
アンダーバーを使用しない理由は、CMS・JavaScript等の変数名にアンダーバーが使用されることが多く、検索の際に支障が出ないようにするためです。
子オブジェクトのクラス名
オブジェクト内のクラス名は、冗長でないことが望ましいです。
オブジェクト内のHTMLの、見出し要素までの階層構造が以下だった場合
c-example > c-example-inner > 見出し要素
見出し要素のクラス名は、最上位のオブジェクトの直属とみなし .c-example-title
とします。
(.c-example-inner-title
ではない)
Atomic Designの考えに基づけば、 .c-example-title
は、さらに「見出し」という最小単位(Atom = module)に分割できます。このCSSフレームワークでは .m-title
がこれにあたります。
クラス名の英単語は略さない
原則として、クラス名の英単語は略さず使用します。
例えば .u-img-rsp
などではなく .u-image-responsive
となります。
例外として、サイズ表記(xxs, xs, sm, md, lg, xl, xxl
)については、略記を使用しています。これはサイズ表記が国際的に認識されており、かつ、非常に多くのサブクラスで使用されているための措置です。
プロパティの並び順
「すべての人に理解しやすい設計」という基本方針に基づき、Mozila・W3Cが提唱している「視覚順」で記述しています。詳しい採用の根拠は拙記事を参照ください。
SassとGulp
多くの人が理解できるよう、必要以上に高度な内容にしないようにしています。このため、mixinやタスクの利用も最低限となっています。
特に &
による接続は、クラス名からの検索がしにくくなるという、CSSフレームワークにおける致命的な問題があるため禁忌としています。
.c-media {
&-inner {
// properties
}
&-object {
// properties
}
&-title {
// properties
}
}