コーディングルール

基本的なマークアップ

オブジェクトの基本構造は以下の通りです。
object>component, layoutに属するオブジェクトはdiv, section, article等の、フローコンテンツでグループ化します。これは両者が「複数のオブジェクトを包括する」という特性を持つためです。
要素の閉じタグの後ろには、コメントでクラス名を付与するのが望ましいです。複数ある場合はすべて書くことは避け、識別しやすい代表的なものを書きます。
インデントはスペース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-block-element-modifier

オブジェクト内のクラス名

オブジェクト内のクラス名は、冗長でないことが望ましいです。
オブジェクト内のHTMLの、見出し要素までの階層構造が以下だった場合

c-example > c-example-inner > 見出し要素

見出し要素のクラス名は、最上位のオブジェクトの直属とみなし.c-example-titleとします。
.c-example-inner-titleではない)

Atomic Designの考えに基づけば、.c-example-inner-titleは、さらに「見出し」という最小単位(Atom = module)に分割できます。このCSSフレームワークに、新たに.m-titleなどを追加することも考えられるでしょう。

クラス名の英単語は略さない

原則として、クラス名の英単語は略さず使用します。
例えば.u-img-respなどではなく.u-image-responsiveとなります。