# 脱カオスなCSSのために実践している7つの事

- リンク: https://torounit.com/blog/%e8%84%b1%e3%82%ab%e3%82%aa%e3%82%b9%e3%81%aacss%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ab%e5%ae%9f%e8%b7%b5%e3%81%97%e3%81%a6%e3%81%84%e3%82%8b7%e3%81%a4%e3%81%ae%e4%ba%8b/
- 公開日: 2014-10-17T09:30:22+09:00
- 作成者: Toro\_Unit

突然ですが、CSSってカオスですよね。

> CSSはすべてを命名で統制をとる紳士協定 [#frontrend](https://twitter.com/hashtag/frontrend?src=hash)
> — (╯°□°）╯︵ uɐʇoɔod (@pocotan001) [2014, 6月 21](https://twitter.com/pocotan001/status/480249894536376320)

まぁそうですよねー。紳士協定とはうまいこと言ったもんです。言語仕様としてどうしよう
もない。全部グローバル。JavaScriptとかでやったらまずクソコードって言われるやつです。

そうはいっても、レスポンシブだとかでどんどん肥大化していく一方なので、何とかしない
と身の破滅です。

とりあえず結論として、[FLOCSS](https://github.com/hiloki/flocss)やれば良いんじゃ
ないですかね。と言ってしまうのもあれなので、とりあえず実行している事を箇条書きで。

## とりあえず何かしら公開されているCSS設計思想を取り入れる。

何かしら入れましょう。[SMACSS](http://qiita.com/matsui_q/items/9b9188904d160a3ec223)
でも[MCSS](http://operatino.github.io/MCSS/ja/)でもFLOCSSでも[モジュール組み](https://github.com/pxgrid/pxg-html-boilerplate/wiki/%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E7%B5%84%E3%81%BF)
でも、とりあえずなんでも良いかと思います。大事なのはそれがドキュメントになっている
ことです。オレオレ設計なんて、1年もすれば、オレオレ設計ver5.0（下位互換性無し）くらい
になっている事が多いので、ろくなもんじゃないです。

そんなにオレオレ設計が良いなら、ちゃんとドキュメンテーション作って、メンテしましょう。

## 別のモジュールへのカスケーディング、CSSの上書きは可能な限り避ける

ここで言うモジュールとは、BEMで言うところのブロックだったり、MCSSでのモジュールだ
ったりです。

別のモジュールへのカスケーディングを行うと、モジュール同士が密結合になり、モジュール
に分割した恩恵がほとんど感じられなくなります。かといって依存性注入はできないし仕方
が無い部分があるのですが、あまりに他のモジュールのセレクタが出てくるようであれば、
リファクタリングが必要です。

    ```decode:true
    .mod-a {

    }

    .mod-b {
        &__body .mod-a {

        }
    }
    ```

こんなCSSが乱発するようならリファクタリング、再設計が必要です。

## リファクタリングする。時々モジュールの設計を見直す

カオスが大きくなると手がつけられなくなり、さらに大きなカオスを生み出すので、小さな
カオスが生まれたら（先述の他のモジュールへのカスケーディングが大量発生したとか）
即座に解消しましょう。CSSの複雑性ってとんでもないので、放置すると突然でかくなったり
します。特に序盤の設計が甘いとなおさらなので、「後でやろう」が効かないことが多い
です。

気になったらすぐに手を打ちましょう。

## 命名規則もしっかりと設計しておく

特に何も考えたくなければ、BEMを採用することをおすすめします。

CSSには名前空間という概念が存在しないので、classの命名には気を遣わないとすぐに破綻
しますし、一般的な名詞を使うと、それが他のCSSと干渉しがちです。

そこら辺を解決するアプローチとしては、[モジュール組み](https://github.com/pxgrid/pxg-html-boilerplate/wiki/%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E7%B5%84%E3%81%BF)
とかもありますが、ぱっと見で干渉しているかどうか等がわからないので、長くて気持ち
悪い命名でカバーする方が安全性は高いと思います。

特に、Bootstrapやらfoundationを使うプロジェクトだと、カオスになりがち感がやばいです。
サイト用のCSSにはプリフィックスをつけておく方が良いかなと思います。

また、これを守らないオレオレclass名が発生すると大変なことになるので、コードレビュー
なり、スタイルガイド、ドキュメンテーションでしっかりと食い止める作業も必要かなと
思います。語彙集なんかを作っておくのも手かなと思います。

[[CSS]BEMの方法論とMindBEMdingという記法 – Qiita](http://qiita.com/torumiyamon1987/items/5c73eb2116190c9a652d)

## モジュールごとにファイルを分ける

面倒くさいと思いますが、PHPとかでClassごとにファイルを分けるくらいのノリで分割しま
しょう。モジュールの量、粒度が視覚化されやすいです。また、感覚的に一つのモジュール
から他のモジュールに触りづらくなります。

CSSがどんどんプログラミングチックになってきているので、プログラミングで割と使われ
ているやり方を取り入れると都合がいいことが多かったりします。

## CSSプリプロセッサを活用する。

使ったことが無ければ、SASSのSCSS記法がいいかなと思います。とにかく情報が多い。

特にBEMを採用するのであれば、”&”がかなり威力を発揮します。それに変数化できるもの
は極力変数化しておくと、特に後述のメディアクエリ周りでかなり威力を発揮します。

いわゆるメディアオブジェクトというやつは、こんな感じに書けます。

    ```decode:true
    <div class="c-media">
      <img src="hoge.jpg" class="c-media__image">
      <div class="c-media__body">...</div>
    </div>
    ```

 

    ```decode:true
    .c-media {

        &__image {
            float: left;
            margin-right: 15px;

            &_right {
                float: right;
                margin-right: 0;
                margin-left: 15px;
            }
        }

        &__body {
            overflow: hidden;
        }
    }
    ```

[爆捗！ WordPressテーマ作成ショートカット（3）：CSSコーディングで泣かないためのSassの基礎知識と10の利点 (1/3) – ＠IT](http://www.atmarkit.co.jp/ait/articles/1402/17/news102.html)

## メディアクエリ(Media Queries)を散らかさない。

メディアクエリの指定が何種類もあると、もうデバッグなんて無理です。とてもじゃない
けどやってられない。SCSSを使うのであれば、foundationみたいに、こんな感じにまとめ
ておくといい気がします。

    ```decode:true
    // Here we define the lower and upper bounds for each media size
    $small-range: (0em, 40em); /* 0, 640px */
    $medium-range: (40.063em, 64em); /* 641px, 1024px */
    $large-range: (64.063em, 90em); /* 1025px, 1440px */
    $xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
    $xxlarge-range: (120.063em); /* 1921px */

    // Media Queries
    $screen: "only screen" !default;

    $landscape: "#{$screen} and (orientation: landscape)" !default;
    $portrait: "#{$screen} and (orientation: portrait)" !default;

    $small-up: $screen !default;
    $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

    $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
    $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

    $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
    $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

    $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
    $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

    $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
    $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
    ```

    ```decode:true
    @media #{$small-up} { }
    @media #{$small-only} { }

    @media #{$medium-up} { }
    @media #{$medium-only} { }

    @media #{$large-up} { }
    @media #{$large-only} { }

    @media #{$xlarge-up} { }
    @media #{$xlarge-only} { }

    @media #{$xxlarge-up} { }
    @media #{$xxlarge-only} { }
    ```

[Media Queries | Foundation Docs](http://foundation.zurb.com/docs/media-queries.html)

また、CSS一番小さな画面から設計するのか、大きな画面から設計するのかの方針は最初に
決めておきましょう。まぁ基本的にはモバイルファールストが良いとおもいます。

CSSごとにデフォルトスタイルがモバイル用なのか、大画面用なのかがぶれると最悪です。
変数化するなり、Mixinを作るなりで、メディアクエリを書かない努力をすべきです。

とにかくメディアクエリの指定は必要最小限にとどめる。メディアクエリを書かずに乗り切れる
ところで使ってしまうと後々デバッグで苦労します。

## 結論

現時点では、[FLOCSS](https://github.com/hiloki/flocss)をちゃんとやることが最適解
かなと思います。ドキュメントも日本語で整備されているし、説明も細かいのでおすすめ。
[Frontrend in Nagoya](http://html5nagoya.jp/frontrend/) で存在を知ってから3ヶ月くらい
取り入れてやっていますが、SMACSSとかやっている時のモヤモヤが解決されてていいです。

最初からBEMを使うことが前提になっていることも良いと思います。

ドキュメントが長いので最初に躊躇しがちですけど、すぐにどうしていいかわからなくなる
ので、ドキュメントが長いのはいいことかなと。

慣れてない人は、[メロン本](http://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AECSS%E8%A8%AD%E8%A8%88%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%A2%E3%83%80%E3%83%B3Web%E9%96%8B%E7%99%BA%E3%81%AB%E6%AC%A0%E3%81%8B%E3%81%9B%E3%81%AA%E3%81%84%E3%80%8C%E4%BF%AE%E6%AD%A3%E3%81%97%E3%82%84%E3%81%99%E3%81%84CSS%E3%80%8D%E3%81%AE%E8%A8%AD%E8%A8%88%E6%89%8B%E6%B3%95-%E8%B0%B7-%E6%8B%93%E6%A8%B9/dp/4844336355%3FSubscriptionId%3DAKIAJVK6YMALFBPDS47A%26tag%3Dtorounit-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4844336355)
を読みながら繰り返し体にたたき込むのがいいとおもいます。あと、[CodeGrid](http://www.codegrid.net/)
のBEM、SMACSSの記事辺りは読んでおきましょう。

CSSってフリーダムすぎるので、使ってて最初のうちにものすごい不自由で、CSS書く時間
が2倍くらいになってしまうこともありますが、それくらいがっちりしないとすぐに破綻し
やすいものかなーと思います。

## 参考図書

[⌊Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法⌉⌊Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法⌉[ [⌊Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法⌉](http://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AECSS%E8%A8%AD%E8%A8%88%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%A2%E3%83%80%E3%83%B3Web%E9%96%8B%E7%99%BA%E3%81%AB%E6%AC%A0%E3%81%8B%E3%81%9B%E3%81%AA%E3%81%84%E3%80%8C%E4%BF%AE%E6%AD%A3%E3%81%97%E3%82%84%E3%81%99%E3%81%84CSS%E3%80%8D%E3%81%AE%E8%A8%AD%E8%A8%88%E6%89%8B%E6%B3%95-%E8%B0%B7-%E6%8B%93%E6%A8%B9-ebook/dp/B00M0ESXUI%3FSubscriptionId%3DAKIAJVK6YMALFBPDS47A%26tag%3Dtorounit-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB00M0ESXUI)