エンジニアの望月(@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の管理をなんとかしたいなぁ、と思う今日このごろです。
ということで、弊社では引き続き採用活動中です! どんな会社かということも含めて興味を持ったら、ぜひぜひ以下をクリックしてみてくださいね(`・ω・´)