Railsにscss-lintを導入し、CSSに秩序を与えました

エンジニアの望月（@c5meru）です。
弊社では、先日CSSの実装パターンを統一しましたが、さらなる秩序を与えるためにscss-lintを導入いたしました。

Railsでscss-lintを導入するのはとっても簡単です。

# Gemfile

source 'https://rubygems.org'

group :development, :test do
  gem 'scss_lint', require: false
end

こんな風にGemfileに1行追記しまして、

$ bundle install

をします。

あとは

$ bundle exec scss-lint （必要であればファイル名を指定）

で動かすことが可能ですが、細かい設定をするために、プロジェクトルートに.scss-lint.ymlを作成して、設定内容を書いていきます。
弊社で使っている.scss-lint.ymlはこんな感じです。

# .scss-lint.yml

scss_files: "app/assets/stylesheets/mobile/modules/**"

linters:
  MergeableSelector:
    force_nesting: false

  NameFormat:
    enabled: false

  PropertySortOrder:
    order:
      - position
      - top
      - right
      - bottom
      - left
      - display
      - float
      - margin
      - margin-top
      - margin-right
      - margin-bottom
      - margin-left
      - padding
      - padding-top
      - padding-right
      - padding-bottom
      - padding-left

  PropertyUnits:
    global: ['em', 'rem', '%']
    properties:
      border: ['px']
      border-radius: ['%', 'px']
      border-width: ['rem', 'px']
      line-height: ['rem']
      margin: ['em', 'rem']
      padding: ['em', 'rem']
      width: ['em', 'rem', '%', 'px']
      height: ['em', 'rem']
      top: ['rem', '%', 'px']
      right: ['rem', '%', 'px']
      bottom: ['rem', '%', 'px']
      left: ['rem', '%', 'px']

  SelectorFormat:
    enabled: false

  UrlFormat:
    enabled: false

  VariableForProperty:
    enabled: true
    properties:
      - color
      - font

  VendorPrefix:
    enabled: false

  QualifyingElement:
    enabled: false

1行目は、Lintを行うファイル・ディレクトリです。
弊社は現在CSSの移行中なので、新しい方のSCSSファイルのみチェックされるようにしています。

2行目以降が、オプションの追加や、ルールの除外です。
こちらのルールについて、いくつかご紹介します。

PropertySortOrder

プロパティの順番を指定します。

# .scss-lint.yml

PropertySortOrder:
    order:
      - position
      - display
      - float

この設定ですと、

// styles.scss

.hoge {
    position: relative;
    float: left;
    display: block;
}

だとエラーになるので

// styles.scss

.hoge {
    position: relative;
    display: block;
    float: left;
}

と書きましょう、というルールになります。

PropertyUnits

プロパティの単位を指定します。

# .scss-lint.yml

PropertyUnits:
    global: ['em', 'rem', '%']
    properties:
      border: ['%', 'px']
      margin: ['em', 'rem']
      padding: ['em', 'rem']

この設定ですと、

// styles.scss

.hoge {
    width: 140px;
    padding: 14px;
}

だとエラーになるので

// styles.scss

.hoge {
    width: 10rem;
    padding: 1rem;
}

と書きましょう、というルールになります。

SelectorFormat

セレクタのフォーマットが揃っているかチェックしてくれます。スネークケースか、キャメルケースか、というフォーマットですね。

弊社はBootstrapと一部併用していたり、オリジナルのCSSはスネークケースで書かれていたりするので、ここを揃えようとするとかなり大変だったりします。
そのため以下のようにして、このチェックはオフにしています。

# .scss-lint.yml

SelectorFormat:
  enabled: false

VariableForProperty

プロパティが変数になっているかどうかチェックしてくれます。

# .scss-lint.yml

VariableForProperty:
  enabled: true
  properties:
    - color
    - font

この設定ですと、

// styles.scss

.hoge {
    color: #ffffff;
    font-size: 12px;
}

だとエラーになるので、どこかで変数を定義してあげて、

// styles.scss

$white = #ffffff;
$font_size_sm: 12px;

.hoge {
    color: $white;
    font-size: $font_size_sm;
}

と書きましょう、というルールになります。

以上が、簡単な、scss-lintの使い方です。

ルールがきちんと決まっていたり、変数化されていて毎回チェックがされれば、明日の自分がルールを忘れていても安心ですね。
特にCSSは秩序を保つのがなかなか難しいのですが、弊社ではコンポーネントごとにファイルを分けたり、今回のようにscss-lintを導入したりして、管理しています。
このscss-lintは rubocopやhaml-lintなどと一緒にCIで自動実行され、エラーがあればSlackやメールで、開発者に通知されるようになっています。

CSSの見通しが良くなってきたので、前の記事にもありますように、JavaScriptの管理をなんとかしたいなぁ、と思う今日このごろです。

---

ということで、弊社では引き続き採用活動中です！ どんな会社かということも含めて興味を持ったら、ぜひぜひ以下をクリックしてみてくださいね(｀・ω・´)

www.wantedly.com