More than 1 year has passed since last update.

BEM Advent Calendar 2013 1よ…13日目の記事です。

BEM Advent Calendar 2013が14日時点で18日の記事がアップされていたり、逆に13日の記事が14日にアップされたりと時空が歪んていますが、気にしないことにします。

この記事では、BEMを取り入れたマークアップがどんなものになるのか、Qiitaのホーム画面(ログイン後)を元に考えていきます。

なお、BEM自体についての説明は、BEM Advent Calendarの各記事やBEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号、CodeGridのBEMによるフロントエンドの設計 - 基本概念とルールを見ていただけるようお願いします。

これから載せるソースのガイドライン

  • BlockとElementの区切りにはアンダースコア2個(__)を使用
    • block__element
  • (Block|Element)とModifierの区切りにはハイフン2個(--)を使用
    • block--modifier
    • element--modifier
    • block__element--modifier
  • Modifierのkeyとvalueの区切りにはアンダースコア1個(_)を使用
    • block--key_value
  • BlockやElementを2つ以上の単語で表す場合の区切りにはハイフン1個(-)を使用
    • block-foo__element-bar--modifier

ただ、「ハイフンを区切り文字としてよく使う」「区切るのにハイフンやアンダースコアを2回打たないといけないのMENDOU」という意見もあると思います。

そういった場合、実践 めんどうくさくない BEM - ダーシマ・ヱンヂニヤリングの「キモい BEM 的クラス名をなんとかする」の章にも、"一貫した規則と機械可読性さえあれば各区切り文字は変えたり消したりしても良いことになっている(本当です)。"と書かれていたり、実際いま自分が関わっているプロジェクトでも区切り方をハイフン1つやアンダースコア1つに変更していたり、キャメルケースを取り入れていたりするので、一貫した規則と機械可読性を明文化さえすればカスタマイズしてもいいと思います。

実際のソース

では、実際のHTMLのソースをアップします。解説は「Qiitaのサイトに勝手にBEMを取り入れてみた」の解説 - Qiita [キータ]で行っているので、ここでは行いません。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Qiita</title>
</head>
<body>
    <header class="global-header">
        <h1 class="logo"><a href="/">Qiita</a></h1>

        <form class="search" action="#" method="post">
            <input placeholder="投稿/ユーザー検索" class="search__text" type="text">
            <input value="検索" class="search__submit--hidden" type="submit"><!-- .search__textがクリックされたら.search__submit--visible -->
        </form>

        <p class="news--visible"><!-- .search__textがクリックされたら.news--hidden -->
            <span class="news__label">受付中</span>
            <span class="news__text">Advent Calendar 2013 参加者募集中!</span>
        </p>

        <div class="user-action">
            <div class="user-action__notification">0</div><!-- 通知があった場合は.user-action__notification--new -->
            <div class="user-action__post"><a href="#">投稿する</a></div>
            <div class="user-action__stock-list"><a href="#">ストック一覧</a></div>
            <div class="user-action__menu"><img alt="自分のアイコン" class="user-action__user-icon--small" src="#"></div>
        </div>
    </header>

    <div class="contents">
        <div class="main-content">
            <header class="main-content__header">
                <h2 class="main-content__description">プログラミング知識を共有しよう。</h2>
                <a class="main-content__post">ノウハウ・Tipsを投稿する</a>
            </header>

            <div class="stream">
                <ul class="stream-tab">
                    <li class="stream-tab__feed--active"><a href="#">フィード</a></li>
                    <li class="stream-tab__public"><a href="#">すべての投稿</a></li>
                    <li class="stream-tab__stock"><a href="#">ストック</a></li>
                    <li class="stream-tab__mine"><a href="#">自分の投稿<span class="stream-tab__mine--count">6</span></a></li>
                </ul>

                <p class="stream-new-activity--visible">
                    1件の新しいアクティビティ
                </p>

                <ol class="stream-list">
                    <li class="stream-list__list-item">
                        <div class="stream-list__icon stream-list__icon-tag">
                            <a class="stream-list__icon-tag-link" href="#"><img alt="JavaScript" src=""></a>
                        </div>

                        <p class="stream-list__message"><a class="stream-list__tag-link stream-list__message-tag-link" href="#">JavaScript</a> に新しい投稿がありました</p>
                        <!-- <p class="stream-list__message"><a class="stream-list__user-link stream-list__message-user-link" href="#">kubosho_</a> がコメントしました</p> -->
                        <h1 class="stream-list__title"><a href="#">全角半角入り混じった文字列から半角数字のみ抜き出す</a></h1>

                        <ul class="stream-list__tag-list">
                            <li class="stream-list__tag-list__list-item">JavaScript</li>
                        </ul>

                        <ul class="stream-list__user-action">
                            <li class="stream-list__user-action__stock--visible">1</li>
                            <li class="stream-list__user-action__comment--visible">1</li>
                        </ul>

                        <div class="stream-list__expand">
                            <i class="icon-double-angle-down"></i>
                        </div>
                    </li>
                </ol>
            </div>
        </div>

        <div class="sub-content">
            <div class="user-profile">
                <img alt="自分のアイコン" class="user-profile__user-icon--medium" src="">
                <div class="user-profile__user-name"><a href="#">kubosho_</a></div>
                <div class="user-profile__user-contribution">
                    <span class="user-profile__user-contribution--count">121</span>Contribution
                </div>
            </div>

            <ul class="category-list">
                <li class="category-list__feed"><a href="#">フィード</a></li>
                <li class="category-list__advent-calendar"><a href="#">Advent Calendar</a></li>
                <li class="category-list__organization"><a href="#">Organization一覧</a></li>
            </ul>

            <div class="recommend-user">
                <h3 class="recommend-user__title">おすすめプログラマ</h3>
                <ul class="recommend-user-list">
                    <!-- 5つ表示される -->
                    <li class="recommend-user-list__list-item">
                        <img alt="プロフィールアイコン" class="recommend-user-list__user-icon--small" src="">
                        <a class="recommend-user-list__user-name" href="#">kubosho_</a>
                        <button class="recommend-user-list__user-follow" data-url_name="kubosho_">フォローする</button>
                        <span class="recommend-user-list__unrecommended">おすすめから外す</span>
                    </li>
                </ul>
                <div class="recommend-user__more">
                    <a href="#">もっと見る</a>
                </div>
            </div>

            <div class="ads">
                <a href="#"><img alt="(広告)Qiita:Career プロのエージェントによる紹介面談で、あなたの条件にあったお仕事を探します" src=""></a>
            </div>
        </div>
    </div>

    <footer class="global-footer">
        <ul class="about-qiita-list">
            <li class="about-qiita-list__list-item"><a href="#">Qiitaとは</a></li>
            <li class="about-qiita-list__list-item"><a href="#">タグ一覧</a></li>
            <li class="about-qiita-list__list-item"><a href="#">Advent Calendar一覧</a></li>
            <li class="about-qiita-list__list-item"><a href="#">Organization一覧</a></li>
            <li class="about-qiita-list__list-item"><a href="#">ユーザー一覧</a></li>
            <li class="about-qiita-list__list-item"><a href="#">Developer API</a></li>
            <li class="about-qiita-list__list-item"><a href="#">JavaScript License</a></li>
        </ul>

        <ul class="about-qiita-list">
            <li class="about-qiita-list__list-item"><a href="#">公式ブログ</a></li>
            <li class="about-qiita-list__list-item"><a href="#">利用規約</a></li>
            <li class="about-qiita-list__list-item"><a href="#">プライバシーボリシー</a></li>
            <li class="about-qiita-list__list-item"><a href="#">特定商取引法に基づく表記</a></li>
            <li class="about-qiita-list__list-item"><a href="#">サポート</a></li>
            <li class="about-qiita-list__list-item"><a href="#">お問い合わせ</a></li>
            <li class="about-qiita-list__list-item"><a href="#">運営会社</a></li>
        </ul>

        <dl class="increments-service-list">
            <dt class="increments-service-list__list-title">Incrementsのサービス</dt>
            <dd class="increments-service-list__list-item"><a href="#">Kobito - プログラミングのメモやスニペットの記録に最適なMacアプリケーション</a></dd>
            <dd class="increments-service-list__list-item"><a href="#">Qiita:Team - シンプル、スマートかつクローズドな情報共有サービス</a></dd>
            <dd class="increments-service-list__list-item"><a href="#">Qiita:Career - プログラマのためのキャリア構築支援サービス</a></dd>
        </dl>

        <p class="copyright">
            <small class="copyright__text">Copyright ©2013 Increments Inc.</small>
        </p>

        <form class="feedback-form" action="#" method="post">
            <textarea placeholder="Qiitaについてご意見をお聞かせください" class="feedback-form__message" id="feedback-form__message" name="feedback-form__message" rows="5"></textarea>
            <label class="feedback-form__send-user-info"><input type="checkbox" checked="checked">ユーザー情報も送る</label>
            <input value="運営者に意見を送る" class="feedback-form__submit" type="submit">
            <p class="feedback-form__notice">頂いたご意見への回答は行っておりません。</p>
            <p class="feedback-form__notice"><a href="#">返信の必要なお問い合わせはこちら</a></p>
        </form>
    </footer>
</body>
</html>
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.