有名サービスに学ぶ CSS の管理手法

Sass ファイルのディレクトリ構造や管理手法について、まとめてみました :memo:

## 目次

- 有名サービスのディレクトリ構造いろいろ
- Sass ファイルを美しく保つためのコツ
- Sass ディレクトリのおすすめ構成方法


# <i class="fa fa-smile-o" style="font-size:1em;"></i> 有名サービスのディレクトリ構造いろいろ

有名なサービスがどうやって Sass プロジェクトを構築しているのか気になったので、調べてみました。

・Compass
・Breakpoint
・Octopress
・Sass Twitter Bootstrap
・Gumby


# <i class="fa fa-bookmark" style="font-size:1em;"></i> [Compass](https://github.com/Compass/compass/tree/stable/core/stylesheets)

(2015/06/18 現在)

compass/core/stylesheets

```
stylesheets/
|— compass/
|— _compass.scss
`— _lemonade.scss
```

compass/core/stylesheets/compass

```
compass/
|
|— css3/
|     |— _animation.scss
|     |— _appearance.scss
|     |— _background-clip.scss
|     |— _background-origin.scss
|     |— _background-size.scss
|     |     ... 
|
|— layout/
|     |— _grid-background.scss
|     |— _sticky-footer.scss
|     `— _stretching.scss
|
|— reset/
|     |— _utilities-legacy.scss
|     `— _utilities.scss
|
|— typography/
|     |— links/
|     |— lists/
|     |— text/
|     |— _links.scss
|     |— _lists.scss
|     |— _text.scss
|     |— _units.scss
|     `— _vertical_rhythm.scss
|
|— utilities/
|     |— color/
|     |— general/
|     |— links/
|     |— lists/
|     |— sass/
|     |— sprites/
|     |— tables/
|     |— text/
|     |— _color.scss
|     |— _general.scss
|     |— _links.scss
|     |— _lists.scss
|     |— _print.scss
|     |— _sass.scss
|     |— _sprites.scss
|     |— _tables.scss
|     `— _text.scss
|
|— _configuration.scss
|
|— _css3.scss
|
|— _layout.scss
|
|— _reset-legacy.scss
|
|— _reset.scss
|
|— _support.scss
|
|— _typography.scss
|
`— _utilities.scss

```

## <i class="fa fa-smile-o" style="font-size:1em;"></i> Compassの特徴

- `stylesheets` ディレクトリ直下には、`_compass.scss` `_lemonade.scss` の2つのファイルだけが置かれている（[lemonade](http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html) は、スプライト画像を扱うための plugin）

- `_compass.scss` の中で、compass の主要機能（以下の `CSS3` `Typography` `Utilities`）を呼び出し、それ以外はユーザの必要性に合わせて import できるようになっている


![スクリーンショット 2015-06-18 16.40.58.png](https://qiita-image-store.s3.amazonaws.com/0/12033/72e77eec-81e7-9d82-39ed-97ed5bf666b2.png)


- `compass` ディレクトリの中では、CSSをカテゴリ分けし、すべて partial で管理している

- 階層が深くなる場合は必ず、ディレクトリと同じ階層に同名の Sass ファイルを用意しておき、`@import` でディレクトリの中にある分割した各ファイルを呼び出している

（例えば以下の `layout` ディレクトリ と `_layout.scss` ファイルのような関係。さらに、その下の階層のディレクトリでも同じ形式を繰り返している）

```
compass/
|— layout/
|     |— _grid-background.scss
|     |— _sticky-footer.scss
|     `— _stretching.scss
|
`— _layout.scss  # この中で layout/*.scss のファイルたちを呼び出す
```

- カテゴリごとに必ずディレクトリを用意するわけではなく、必要性がない場合は単一の Sass ファイルのまま置く、という使い分けがされている

- 異なるディレクトリ内の partial ファイルを、絶対PATHで呼び出している箇所もある。mixin を使いたい箇所で他のファイルを読み込んでいたり、必要になる部分だけで特定のファイルを読み込んで使っていると思われる


# <i class="fa fa-bookmark" style="font-size:1em;"></i>  [Breakpoint](https://github.com/lesjames/breakpoint/tree/master/breakpoint)

(2015/06/18 現在)

```
breakpoint/
|
|— _breakpoint.scss  # 変数のデフォルトの値の設定と、他のファイルの読み込み
|— _utils.scss  # function の定義
|— _core.scss  # mixin の定義
`— _grid.scss  # メインとなるスタイルシート

```

### <i class="fa fa-smile-o" style="font-size:1em;"></i> Breakpoint の特徴

・グローバル変数のデフォルト値設定と、他の Sass ファイルの読み込みをひとつのファイルにまとめ、同じ階層にすべての Sass ファイルを並列している




# <i class="fa fa-bookmark" style="font-size:1em;"></i>  [Octopress](https://github.com/imathis/octopress/tree/master/.themes/classic/sass)

(2015/06/18 現在)

octopress/.themes/classic/

```
sass/
|
|— base/
|     |— _layout.scss  # body, header, footer などのレイアウト定義
|     |— _solarized.scss  # 色の定義
|     |— _theme.scss  # テーマとなるデザイン
|     |— _typography.scss  # タイポグラフィ
|     `— _utilities.scss  # Mix-in と Function
|
|— custom/  # 自分でもう少しカスタマイズしたいときに、ここに追記
|     |— _colors.scss
|     |— _fonts.scss
|     |— _layout.scss
|     `— _styles.scss  # 1番最後に読み込まれるので、plugin など上書きしたいときに使う
|
|— partials/
|     |— sidebar/
|     |     |— _base.scss
|     |     |— _delicious.scss
|     |     |— _googleplus.scss
|     |     `— _pinboard.scss
|     |
|     |— _archive.scss
|     |— _blog.scss
|     |— _footer.scss
|     |— _header.scss
|     |— _navigation.scss
|     |— _sharing.scss
|     |— _sidebar.scss # sidebar のディレクトリのファイルの読み込み順指定
|     `— _syntax.scss
|
|— plugins/
|     `— _plugins.scss # plugin をこのディレクトリに置くと自動的に読み込んでくれる
|
|— _base.scss  # base ディレクトリ内のファイルの読み込み順指定
|
|— _partials.scss  # partials ディレクトリ内のファイルの読み込み順指定
|
`— screen.scss  # compass の読み込みと、すべてのディレクトリを含めた読み込み順指定

```

## <i class="fa fa-smile-o" style="font-size:1em;"></i> Octopress の特徴

- ユーザがカスタマイズするためのディレクトリを用意し、1番最後に読み込まれるようにしている


# <i class="fa fa-bookmark" style="font-size:1em;"></i> [Sass Twitter Bootstrap](https://github.com/jlong/sass-bootstrap-defunct/tree/master/lib)

(2015/06/18 現在)

```
sass-bootstrap-defunct/lib/
|
|— _alerts.scss
|— _badges.scss
|— _breadcrumbs.scss
|— _button-groups.scss
|— _buttons.scss
|— _carousel.scss
|— _close.scss
|— _code.scss
|— _component-animations.scss
|— _dropdowns.scss
|— _forms.scss
|— _glyphicons.scss
|— _grid.scss
|— _input-groups.scss
|— _jumbotron.scss
|— _labels.scss
|— _list-group.scss
|— _media.scss
|— _mixins.scss
|— _modals.scss
|— _navbar.scss
|— _navs.scss
|— _normalize.scss
|— _pager.scss
|— _pagination.scss
|— _panels.scss
|— _popovers.scss
|— _print.scss
|— _progress-bars.scss
|— _responsive-utilities.scss
|— _scaffolding.scss
|— _tables.scss
|— _theme.scss
|— _thumbnails.scss
|— _tooltip.scss
|— _type.scss
|— _utilities.scss
|— _variables.scss
|— _wells.scss
`— bootstrap.scss

```

## <i class="fa fa-smile-o" style="font-size:1em;"></i> Sass Twitter Bootstrap の特徴

・ファイルは機能ごとに分けられ、すべて並列で置かれている
・bootstrap.scss というメインのスタイルシートが置かれていて、その中で `_theme.scss` 以外のすべてのファイルを `import` している


# <i class="fa fa-bookmark" style="font-size:1em;"></i> [Gumby](https://github.com/GumbyFramework/Gumby)

 (2015/06/18 現在)

```
sass/
|
|— extensions/modular-scale/
|
|— functions/
|     |— _all.scss
|     |— _breakpoints.scss
|     |— _button-size.scss
|     |— _clearfix.scss
|     |— _em.scss
|     |     ...
|
|— ui/
|     |— _all.scss  # ui ディレクトリ内の各ファイルの読み込み順指定
|     |— _buttons.scss
|     |— _forms.scss
|     |— _icons.scss
|     |— _images.scss
|     |— _labels.scss
|     |— _navbar.scss
|     |     ...
|
|— var/
|     |— icons/
|     |— _lists.scss
|     `— _settings.scss  # サイズやカラーなどの変数一覧
|
|— _base.scss
|
|— _custom.scss  # カスタマイズ用
|
|— _fonts.scss
|
|— _grid.scss
|
|— _shame.scss
|
|— _typography.scss
|
`— gumby.scss  # modular-scale や compass の読み込み、各ファイルの読み込み順指定


```

## <i class="fa fa-smile-o" style="font-size:1em;"></i> Gumby の特徴
・メインファイルとして `gumby.scss` があり、必要なファイルを順番に `@import` している
・`modular-scale` や `compass` などの plugin もメインファイルの中で呼び出している
・`var` ディレクトリの中に、アイコンと設定ファイル（変数一覧）をまとめている
・`ui` ディレクトリ、`functions` ディレクトリの中に、`_all.scss` があり、ディレクトリ内のファイルを呼び出している
・ユーザが自由にカスタマイズ（上書き）できるように `_custom.scss` が用意されており、一番最後に読み込まれている。


# <i class="fa fa-smile-o" style="font-size:1em;"></i> Sass ファイルを美しく保つためのコツ（考察）

- 役割や機能ごとにカテゴリ分けをする
- 共通で使うパーツがある場合は、shared ディレクトリなどにまとめて、先に読み込まれるようにする
- ファイルの読み込み順を指定したいときは、同じ階層に `_base.scss` ファイルや `_all.scss` ファイルを用意して、@import で順番付けしながらそれらを読み込む
- 場合によってはカスタマイズ用のファイルを別で用意しておく
- カテゴリごとに必ずディレクトリを用意するわけではなく、必要性がない場合は単一の Sass ファイルのまま置く、という使い分けをする


# <i class="fa fa-smile-o" style="font-size:1em;"></i> Sass ディレクトリのおすすめ構成方法

上記で学んだテクニックも取り入れつつ、私なりの Sass ディレクトリのおすすめ構成方法を2つご紹介します。

どんな構成方法がベストなのか考えたとき、一番いいのはそのプロジェクトの規模によって臨機応変に適切なディレクトリ構造を提案し、プロジェクトに相応しい階層、カテゴライズ、命名規則で対応することだと思います。

かなりシンプルな Rails アプリケーションでしたら、デフォルトで生成される Controller 名のファイルで管理するのでも十分ですし、
とても複雑で階層が深く、stylesheets が膨れ上がってしまう状況では、レイヤー分け、カテゴリ分けを徹底しないと、どこに何があるのかわからなくなってしまうと思います。

ざっくりした分け方ですが、stylesheets がシンプルな場合の構成方法（パターン１）と、複雑な場合の構成方法（パターン２）という形でご紹介したいと思います。

# <i class="fa fa-cubes" style="font-size:1em;"></i> 構成パターン１

プラグイン、モジュール（ミックスイン、関数、変数など）、メインCSS、といった大きな括りでまとめた構成手法です。

```
stylesheets/
|
|— vendor/
|     |— compass/
|     `...
|
|
|— modules/
|     |— _base.scss
|     |— _colors.scss
|     |— _variables.scss
|     |— _mixins.scss
|     |— _functions.scss
|     `...
|
|
|— partials/
|     |— _base.scss
|     |
|     |— shared/
|     |     |— _base.scss
|     |     |— _nav.scss
|     |     |— _side_bar.scss
|     |     ...
|     |
|     |— books/
|     |     |— _base.scss
|     |     |— _book_list.scss
|     |     |— _recommend.scss
|     |     ...
|     |
|     `— users/
|           |— _base.scss
|           |— _index.scss
|           |— _user_list.scss
|           |— _thumbnail.scss
|           ...
|
|— screen.scss
|
`— application.css
```

# 各ディレクトリの役割

## <i class="fa fa-folder-open" style="font-size:1em;"></i> vendor ディレクトリ
Compass や Twitter Bootstrap など、サードパーティのファイルや、他のプロジェクトと共有しているパッケージなどの置き場所として使います。
上書きしたい箇所がある場合は、別ファイルで partials に置きます。そうすることで、パッケージのバージョン管理が楽になります。



## <i class="fa fa-folder-open" style="font-size:1em;"></i> modules ディレクトリ
実際には CSS として吐き出されない、変数や関数、ミックスインなどのコードの置き場所として使います。
先に modules ディレクトリを読み込むことによって、すべての変数や関数を、メインの Stylesheets の中で使うことができます。



## <i class="fa fa-folder-open" style="font-size:1em;"></i> partials ディレクトリ
ここがメインの stylesheets の置き場所となります。

プロジェクトの規模が小さければ（stylesheets の書く量が少なければ）、機能名やController 名などでカテゴリ分けした単体ファイルを並べればよいと思いますが、
プロジェクトの規模が大きい場合には、ディレクトリを使ってさらに階層を深くていきます。

また、カテゴリをまたいだ共通部分は、shared ディレクトリを作ってその中にファイルを置き、共有します。



## <i class="fa fa-folder-open-o" style="font-size:1em;"></i> base partial を使う意味

`_base` stylesheet は、変数などを事前に読み込む初期設定のために使う方も多いかもしれません。
私の場合は、Gumby の `_all.scss` のように、ファイル管理のために使っています。

例えば、この部分↓


```
|— partials/
|     |— _base.scss
|     |
|     |— books/
|     |     |— _base.scss
|     |     |— _book_list.scss
|     |     |— _recommend.scss

```

`partials/` の下に、`_base.scss` があり、それと並列して `books controller` の Sass をまとめたディレクトリがあります。
この場合は、`_base.scss` ファイルの内容はそれぞれ以下のようになります。


```partials/_base.scss
@import 'shared/base'; // shared ディレクトリの base を読み込む
@import 'books/base';  // books ディレクトリの base を読み込む
@import 'users/base’;  // users ディレクトリの base を読み込む
```

```partials/books/_base.scss
@import 'book_list';  // 同じ階層にある book_list を読み込む
@import 'recommend';  // 同じ階層にある recommend を読み込む
```

`shared` ディレクトリには、コントローラー間の共有コードが置かれているので、1番最初に読み込んでいます。



最終的にはすべてのファイルが読み込まれるのですが、
`_base.scss` ファイルを置くことによって、Sass ファイルの読み込まれる順番を制御することができます。 





# <i class="fa fa-cubes" style="font-size:1em;"></i> 構成パターン２

レイヤー構造を取り入れた構成手法です。



# <i class="fa fa-arrow-circle-right" style="font-size:1em;"></i> 参考リンク

#### <i class="fa fa-file-text-o" style="font-size:1em;"></i> [How to structure a Sass project - The Sass Way](http://thesassway.com/beginner/how-to-structure-a-sass-project)

こちらの記事では、Sass プロジェクトにおいてのディレクトリ構造について、提案されています。
とてもわかりやすく書かれているので、かなり参考にさせていただきました。


#### <i class="fa fa-file-text-o" style="font-size:1em;"></i> [stackoverflow - Proper SCSS Asset Structure in Rails](http://stackoverflow.com/questions/9138946/proper-scss-asset-structure-in-rails)

こちらは、Stylesheets の読み込み順の大切さについて書かれた記事（Q&A）です。
基本的なことがわかりやすく書かれているため、翻訳させていただきました。
→[【Qiita: Rails での適切な Sass の構成手法について（翻訳）】](http://qiita.com/natsu871/items/53b38a2543df97df751d)


#### <i class="fa fa-book" style="font-size:1em;"></i> [Web制作者のためのCSS設計の教科書](http://urx.nu/hrqQ)

最近のCSS設計のTipsが盛りだくさんで、とても参考にさせていただきました。