Edited at

csstyleを使ってcssのモジュール化を効率的に

More than 3 years have passed since last update.

css、書くのがとてもむずかしいので、なんとかして綺麗に書いていきたいのですが、なにかと難しい事が多い。

BEMを使ってcssをモジュール化して管理するのが流行りなようですが、どうしてもBEMは人間の書くものじゃない気がしていました。

そんな中ちょっといいのではとおもったcsstyleというライブラリがあったので紹介します。


  • csstyleはsass3.3のfeatureを使っています。使用する場合はご注意ください。


csstyleって?

csstyleはとても簡単なsassのシンタックス拡張です。それ自体は80行ほどのとても小さなscssファイルなのですが、これによってcssがメンテナブルに、かつ綺麗に書けるというものです。

csstyleでは、cssを


  • components

  • options

  • parts

  • tweaks

という4つに分けて記述します。

(locationsというものもあるのですが、これは後述します)

BEM的には

componentsがblock、

optionsがmodifier、

elementがparts

というような対応になるでしょうか。(違っていたらごめんなさい)

これにtweaksというものが加わります。

tweaksはoptionsと同じようなものですが、optionsは一つのcomponentsにだけ適応するものなのに対し、tweaksはどのcomponentsにも適用できるようなもの、という感じです。


基本の使い方

実際に書いてみましょう。

まずはcomponentsから。(公式サイトから引用しています。一部わかりやすくするために変更しています)

<a class="button">Neat!</a>

@include component(button) {

background: #6BD9ED;
padding: 15px;
}

このように @include 文をつかってscssを記述し、それが button というクラス名でhtml内で使用できます。

つぎにoptions、partsを使ってみます

<a class="button --action">

Register Now
<span class="button__icon --hover"></span>
</a>

こんなhtmlがあったとして

@include component(button) {

background: #6BD9ED;
padding: 15px;

@include option(action){
color: #1F1F1F;
background: #A7E040;
padding-top: 0;
}

@include part(icon){
font-size: 34px;
position: relative;
top: 10px;

@include option(hover){
color: red;
}
}
}

このように書いていきます。

tweaksは

<a class="button --action +rounded">

Register Now
<span class="button__icon --rocket"></span>
</a>

@include tweak(rounded) {

border-radius: 10px;
}

このように +rounded といった形で記述できます。

また、locationというものもあり

<span class="@home">

<a class="button --action +rounded +glass">
Register Now
<span class="button__icon --rocket"></span>
</a>
</span>

@include location(home) {

@include component(button){
color: #6BD9ED;
background: #1F1F1F;
}
}

このように記述できます。

topページだけはデザインを少し変えたい、なんて時によいのかもしれないです。


まとめ

csstyleの良い所は、html側ではBEM記法でcomponentを記述することで、構造をわかりやすくする一方、css側ではBEMを書くこと無く、かつ可読性が高い状態でcssを記述できることかなと思います。

あとBEMをcssでもhtmlでも書くなんて正気の沙汰ではないと思うので、この方法はいいんじゃないかなぁと思っています。

公式サイト

Github