csstyleを使ってみた

  • 10
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

この記事はフィードフォースエンジニア Advent Calendar 2015 - Adventar 17日目の記事です。
16日目は hapickyQiita:Teamで好評だった記事から2015年をふりかえる の話でした

こんにちは!フィードフォース制作チームのコーダー、a-ideです!
最近ボドゲの面白さに目覚めています
ご興味ある方、遊びにきてくださいね !!(ステマ)

csstyle とは

美しく、メンテナンスしやすいcssを書くためのツールです。

なぜcsstyleを導入しようと思ったのか

弊社ではcssの命名規則としてBEMを起用していますが、ルールが明確になったけれど
とにかくコードの可読性が低いところがネガティブでした。

追加するclassが少ない場合はいいけれど…
image_01.png

Demo

index.html
<a href="#" class="c-button">Button</a>
<a href="#" class="c-button c-button--green">Button</a>
<a href="#" class="c-button c-button--blue">Button</a>
<a href="#" class="c-button c-button--purple">Button</a>
<a href="#" class="c-button c-button--yellow">Button</a>

更に他のプロパティを追加したい時、classだらけになってしまいます。
image_02.png

button.html
<a href="#" class="c-button c-button--green c-button--square c-button--block">Button</a>

しかし!!
csstyleを使えば、Block名の c-button を省略する事ができるのです!
どんなclassを使用しているのか、一目で分かりやすくなりませんか?

button.html
<a href="#" class="c-button --green --square --block">Button</a>

複雑になりがちなcssを少しでも見やすくしたいと思い、csstyleを導入してみることにしました。

準備

使用したいプロジェクトにSass, または Postcssを導入する
※ Sassを利用する場合は version 3.4 以上

手順

①csstyleをインストール

npm install csstyle --save

bowerも使えます。

bower install csstyle --save

② Sassを使用する場合は、csstyleをスタイルシートに読み込ませる。

@import 'csstyle';

<html> or <body>id="csstyle" を追加する

postcss を使用していた場合は、以下も記述する。

postcss([require('postcss-nested'), require('csstyle')]);

これで準備は完了!

csstyleでできること

csstyleでは、BEMの概念を元に以下のclassを作成できます。
Tweaks のみ、FLOCSSUtility という概念に近いかと思います。)

  • Components → Block
  • Options → Modifier
  • Parts → Element
  • Tweaks → Utility

使い方

以下のclassを作成します。
※以下のコードは、DEMOページのスタイルと一部異なります。

Components

image_03.png

HTML
<a class="c-button">Button</a>
SCSS
@include component(c-button) {
 color: #333333;
 background-color: #FFFFFF;
 padding: .8em 2em;
}

Options

image_04.png

HTML
<a class="c-button --green">Button</a>
SCSS
@include component(c-button) {
 color: #333333;
 background-color: #FFFFFF;
 padding: .8em 2em;

 // Modifier: Background Color;
 @include option(green) {
  color: #FFF;
  background-color: #2ECC71;
 }
}

Parts

image_05.png

HTML
<a href="#" class="c-button --purple">
 Button
 <i class="c-button__icon"></i>
</a>
SCSS
@include component(c-button) {
 color: #333333;
 background-color: #FFFFFF;
 padding: .8em 2em;

 @include part(icon) {
  &:after {
   content: "♥";
    margin-left: 5px;
  }
 }
}

Tweaks

TweaksはどのBlockにも適応させる事ができます。
(例: .c-box, c-title… など

image_06.png

HTML
<a href="#" class="c-button --green --purple">
 Button
 <i class="c-button__icon"></i>
</a>
SCSS
@include component(c-button) {
 color: #333333;
 background-color: #FFFFFF;
 padding: .8em 2em;
}

@include tweak(box-shadow) {
 box-shadow: 0 3px 5px #CCCCCC;
}

class名の変更

デフォルトの設定を変更する事ができます。
変更可能な箇所は以下の4つです。

  • Options: $csstyle-option-symbol
  • Parts: $csstyle-part-symbol
  • Tweaks: $csstyle-tweak-symbol
  • RootId: $csstyle-root-id

例:

_variable.scss
$csstyle-option-symbol: '-'; // '--green' -> '-green'
$csstyle-part-symbol:   '_'; // '__icon' -> '_icon'
$csstyle-tweak-symbol:  'u-'; // '+box-shadow' -> 'u-box-shadow'
$csstyle-root-id:       'app'; // '#csstyle' -> '#app'

メリット・デメリット

メリット

  • コードの可読性が上がる
  • htmlファイル内の記述量が減る
  • 学習コストが少ない

デメリット

  • 隣接セレクタの書き方が制限されてしまう
_box.scss
@include component(c-box) {
  border: solid 1px $blue;

  @include part(heading) {
    font-size: rem(18);
  }

  // コンパイル不可×
  @include part(content) {
    @include part(heading) + & {
      margin-top: 20px;
    }
  }

  // コンパイル不可×
  @include part(heading) + @include part(content) {
    margin-top: 20px;
  }
}

隣接セレクタを記述する場合は、以下の書き方でコンパイル可能です。
(ただしscssファイル内の統一性が少しなくなる)

_box.scss
// コンパイル可◯
&__heading + &__content {
  margin-top: 20px;
}

補足

  • Tweaks を使用しない場合は、手順③の id="csstyle" を追加する必要はありません。

明日は task1010243 のクリスマス向けプレゼント交換アプリの話です\(^o^)/
お楽しみに♪