Nachiguro

NachiguroとはSUZURIのCSSフレームワークです。名前は硯の原料である那智黒石(なちぐろいし)が由来です。

編集するには？

このスタイルガイドは、誰でも自由に編集することができます。

すべてのドキュメントはassets/stylesheets/lib/nachiguroにあるSCSSファイルのコメントにMarkdownで書かれています。

HTMLファイルはHologramを利用して作られていますので、コメントの記法はHologramの仕様に準じます。詳しくは HologramのREADMEをご覧ください。

ドキュメントを追加したり編集したら、$ docker-compose exec app hologramを実行すると、このスタイルガイドに反映されます。

コーディングルール

Nachiguroのコンポーネントであることを明示的にするため接頭辞`ncgr-`をつける

Nachiguroのコンポーネントであることを明示的にするため接頭辞ncgr-をつけます。このルールは最近決めたので、まだ接頭辞がついていないコンポーネントがあります。随時ついているものに置き換えていきます。

.ncgr-button {}

記法はmindBEMdingに則る

記法はmindBEMdingに則ります。以下のようにblockとelementはアンダースコア2つ、blockとmodifierはハイフン2つでつなぎます。この記法にすることは最近決めたので、まだmindBEMdingで書かれていないものがあります。随時この記法のものに変えていきます。

.ncgr-block__element {}
.ncgr-block--modifier {}

JSでDOMを操作する場合は接頭辞`js-`をつける

JSでDOMを操作する場合は接頭辞js-をつけます。このセレクタはあくまでJSから操作する場合のみに使用し、スタイルシートでスタイルを指定する場合はjs-接頭辞のないものに指定し、役割を分離します。

<div class="ncgr-block js-ncgr-block">ブロック</div>

.ncgr-block {
  color: red;
}

$('.js-ncgr-block').on('click', function() {
  console.log('クリック！');
});

margin,paddingの引数

margin, paddingの引数は省略せずに4つすべて書きます。これはプリプロセッサ経由であればコンパイル時にミニファイ対象であることと、ぱっと見てわかりやすいためです。 (この「わかりやすい」は人によって違いますが、SUZURIではすべて書くことにします)

.ncgr-block {
  padding: 10px 0 10px 0;
}

ただし、すべて0の場合は引数は1つのほうがわかりやすいので引数は1つにします。

.ncgr-block {
  padding: 0;
}

hamlのdivは明示的に書く

hamlのdivは省略可能ですがSUZURIでは明示的にdivであることをわかりやすくするため、書くようにします。

%div.ncgr-block
  ブロック

Sassのrandom関数を使用しない

Sassのrandom関数を使うとdeployした際にCSSが適用されなくなるため、 random関数は使用しないでください。

省略語をなるべく使わない

btnやcolなど省略語は使いません。これは、btnとbuttonを比べると誰が見てもbuttonの方が「ボタンなんだな」とわかるからです。コードはタイピングの文字数が少なくなることと天秤にかけてもわかることの方が大切です。

コンポーネントの命名に和名をなるべく使わない

ズッキュンの名前をzukkyunとしたくなることがありますが、これはfavoritesとします。この命名は基本的にはModelの名前と統一してコード内での表記ゆれを減らして考えることを少なくします。また、違う言語を扱う人が同時にコードを書くときに、英語であればもっとも伝わるコストが少なくてすみます。