このエントリーをはてなブックマークに追加
スクリーンショット 2015-02-10 11.51.54

読了: 約 2 分

プロジェクトがクローズするけど、サービス自体は残るという条件にあたり、ソース自体は綺麗に保っておこう(更新は限りなくゼロに近い)という事で、BEMとOOCSSを交えたものを創ろうと思ったら、既にMCSSというものがあったので、この思想で書き換えるのでメモ。

BEM基本

折角BEMを今更ながら書き換えるという事で、基本的な事から。
色々な記事を見て来たけどBEMについてはこちらの記事が一番まとまっている。
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md

BEMの基本ルールである、ブロック、エレメント、モディファイアという構造についてはそのまま踏襲する。

<ul class="menu">
  <li class="menu__item">…</li>
  <li class="menu__item">…</li>
</ul>

 

MCSS公式サイト

MCSS

思想というか書き方は、まんまBEM+OOCSSなので特に違和感無く使用出来る。

/* Module name
-------------------------------------------------- */
.module { }

.module_list { }
    .touch .module_list { }
    .ie9 .module_list { }
/* /Module name */
<header class="toolbar">
    <a href="/" class="toolbar_logo"></a>
    <menu class="toolbar_dropdown_ul umenu">
        <li class="umenu_li"></li>
        <li class="umenu_li"></li>
    </menu>
</header>

OOCSSなので、結局ディクショナリーが必要になる。つまり、事前にある程度プロジェクトの記法を把握する時間が必要になる。だから、MCSSの上記のサイトにも最後にディクショナリーが用意されている。

この辺は宗教戦争になるので、何が分かり易いかは自分次第か、会社単位で管理すると良いのではないだろうか。

いずれにせよ、スマートフォンも増え、更にratinaの機種も増えるのではないかといわれる昨今フロントエンドの作業効率化にいかにして取り組むかというのは今更ながらに大切だなと考える次第である。

 

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'