「Qiitaのサイトに勝手にBEMを取り入れてみた」の解説

More than 1 year has passed since last update.

BEM Advent Calendar 2013 16日目の記事です。

13日の金曜日にQiitaのサイトにBEMを勝手に取り入れてみましたが、BEMを取り入れるにあたって、どうBlockとElementとModifierを分けたかを解説していこうと思います。

なお解説しやすいように、前回書いたソースを要素とクラスとIDに分け、Sass形式にして解説します。

ヘッダー部分のソース

.global-header
    .logo
        a

    .search
        .search__text
        .search__submit--hidden

    .news--visible
        .news__label
        .news__text

    .user-action
        .user-action__notification
        .user-action__post
            a
        .user-action__stock-list
            a
        .user-action__menu
            .user-action__user-icon--small

.global-headerという大きなblockの中に4つのblockが入っています。.news_labelのところですが、例えばお知らせの種類によってラベルの背景色や文字色を変えたいというリクエストが来たら、.newslabel--new, .news_label--importantという感じで、お知らせの状態によって、Modifier部分を追加する感じです。

メインコンテンツ部分のソース

.main-content
    .main-content__header
        .main-content__description
        .main-content__post

    .stream
        .stream-tab
            .stream-tab__feed--active
                a
            .stream-tab__public
                a
            .stream-tab__stock
                a
            .stream-tab__mine
                a
                    .stream-tab__mine--count

        .stream-new-activity--visible

        .stream-list
            .stream-list__list-item
                .stream-list__icon.stream-list__icon-tag
                    .stream-list__tag-link.stream-list__icon-tag-link
                        img
                .stream-list__message
                    .stream-list__tag-link.stream-list__message-tag-link
                .stream-list__title
                    a

                .stream-list__tag-list
                    .stream-list__tag-list__list-item

                .stream-list__user-action
                    .stream-list__user-action__stock--visible
                    .stream-list__user-action__comment--visible

                .stream-list__expand
                    .icon-double-angle-down

結構迷ったのが、.main-content_headerのところで、「プログラミング知識を共有しよう。」という文言と「ノウハウ・Tipsを投稿する」というボタンをどう囲むか迷ったのですが、下のフィードやすべての投稿などをユーザーに流してもらうのがQiitaにとって重要だよね、と思い.main-content__headerというclass名をつけました。

あと.stream-list_tag-link.stream-listicon-tag-linkというclassのところ(フィードでいうタグアイコンやユーザーのアイコン)部分ですが、この要素内がタグのアイコンかユーザーのアイコンかによって「.stream-listtag-link.stream-listicon-tag-link」か「.stream-listuser-link.stream-list_icon-user-link」とclass名が変わる感じです。

サブコンテンツ部分のソース

.sub-content
    .user-profile
        .user-profile__user-icon--medium
        .user-profile__user-name
            a
            .user-profile__user-contribution
                .user-profile__user-contribution--count

    .category-list
        .category-list__feed
            a
        .category-list__advent-calendar
            a
        .category-list__organization
            a

    .recommend-user
        .recommend-user__title
        .recommend-user-list
            .recommend-user-list__list-item
                .recommend-user-list__user-icon--small
                .recommend-user-list__user-name
                .recommend-user-list__user-follow
                .recommend-user-list__unrecommended
        .recommend-user__more
            a

    .ads
        a
            img

.user-profile__user-icon--mediumというクラス名ですが、表示させたい画像のサイズによってModifier部分の名前が変わります。例を挙げるなら、フィードやすべての投稿ではsmall、サイドバーのところではmedium、マイページではlargeという感じです。.recommend-user部分のアイコンを示すclass名でも同様の形式となっています。

フッター部分のソース

.global-footer
    .about-qiita-list
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a

    .about-qiita-list
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a

    .increments-service-list
        .increments-service-list__list-title
        .increments-service-list__list-item
            a
        .increments-service-list__list-item
            a
        .increments-service-list__list-item
            a

    .copyright
        .copyright__text

    .feedback-form
        .feedback-form__message#feedback-form__message
        .feedback-form__send-user-info
            input[type="checkbox"]
        .feedback-form__submit
        .feedback-form__notice
        .feedback-form__notice
            a

ここではlist-itemというElementが多く出ています(というか他の箇所にもありましたね…)。ソースの全体を通して、なんらかのリストに属しているElementという時に使う感じです。「Incrementsのサービス」というタイトルがあり、その下にサービスリストがあるところでは、タイトルのclassでElementにあたるところを「list-title」としてタイトルだと読み取れるようにしています。

ちなみに、全体を通してa要素にはclassをあまりつけていません。これはCSS側で指定する際に「.selector a」と子孫セレクタで指定することで、どのセレクタに属すa要素なのか分かるのでわざわざclassを付けなくてもいいという判断です。

そして、上で紹介した3つの4大ブロックを組み合わせた結果が以下のような構造になります。

.global-header
    .logo
        a

    .search
        .search__text
        .search__submit--hidden

    .news--visible
        .news__label
        .news__text

    .user-action
        .user-action__notification
        .user-action__post
            a
        .user-action__stock-list
            a
        .user-action__menu
            .user-action__user-icon--small

.contents
    .main-content
        .main-content__header
            .main-content__description
            .main-content__post

        .stream
            .stream-tab
                .stream-tab__feed--active
                    a
                .stream-tab__public
                    a
                .stream-tab__stock
                    a
                .stream-tab__mine
                    a
                        .stream-tab__mine--count

            .stream-new-activity--visible

            .stream-list
                .stream-list__list-item
                    .stream-list__icon.stream-list__icon-tag
                        .stream-list__tag-link
                            img
                    .stream-list__message
                        .stream-list__tag-link.stream-list__message__tag-link
                    .stream-list__title
                        a

                    .stream-list__tag-list
                        .stream-list__tag-list__list-item

                    .stream-list__user-action
                        .stream-list__user-action__stock--visible
                        .stream-list__user-action__comment--visible

                    .stream-list__expand
                        .icon-double-angle-down

    .sub-content
        .user-profile
            .user-profile__user-icon--medium
            .user-profile__user-name
                a
                .user-profile__user-contribution
                    .user-profile__user-contribution--count

        .category-list
            .category-list__feed
                a
            .category-list__advent-calendar
                a
            .category-list__organization
                a

        .recommend-user
            .recommend-user__title
            .recommend-user-list
                .recommend-user-list__list-item
                    .recommend-user-list__user-icon--small
                    .recommend-user-list__user-name
                    .recommend-user-list__user-follow
                    .recommend-user-list__unrecommended
            .recommend-user__more
                a

        .ads
            a
                img

.global-footer
    .about-qiita-list
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a

    .about-qiita-list
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a
        .about-qiita-list__list-item
            a

    .increments-service-list
        .increments-service-list__list-title
        .increments-service-list__list-item
            a
        .increments-service-list__list-item
            a
        .increments-service-list__list-item
            a

    .copyright
        .copyright__text

    .feedback-form
        .feedback-form__message#feedback-form__message
        .feedback-form__send-user-info
            input[type="checkbox"]
        .feedback-form__submit
        .feedback-form__notice
        .feedback-form__notice
            a
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.