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