コーディングルール

基本的なマークアップ

オブジェクトの基本構造は以下の通りです。
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等の変数名にアンダーバーが使用されることが多く、検索の際に支障が出ないようにするためです。

特定のコンテンツのみで使用される場合は、projectに属するものとし、先頭に p-contentsName- を付与します。ニュースコンテンツのトピックスリストであれば、以下の通りとなります。

.p-news-topics

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

オブジェクト内のクラス名は、冗長でないことが望ましいです。
オブジェクト内の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となります。

プロパティの並び順

「すべての人に理解しやすい設計」という基本方針に基づき、Mozila・W3Cが提唱している「視覚順」で記述しています。詳しい採用の根拠は拙記事を参照ください。

CSSプロパティの並び順を「視覚順」で書いている件

SassとGulp

多くの人が理解できるよう、必要以上に高度な内容にしないようにしています。このため、mixinやタスクの利用も最低限となっています。
特に &__ による接続は、クラス名からの検索がしにくくなるという、CSSフレームワークにおける致命的な問題があるため禁忌としています。

.c-media {
    &__inner {
        // properties
    }
    &__object {
        // properties
    }
    &__title {
        // properties
    }
}