そのミックスインや関数、本当に必要ですか? 手段の目的化に注意を。

150801_001

仕事で案件に関わっていると、特段必要がないにも関わらず、Sass機能を使っているファイルを見かけることがあります。

例えば、

一体何の意味が? 変数を使う必要がないですね。
というわけで、実務におけるSassの使い方を見直します。

目次

 

設定しているミックスイン

150801_002

フォントサイズ

  • px or rem の場合は、2行目と3行目を使用
  • % の場合は、4行目のみを使用
  • 16 は、ブラウザデフォルトのフォントサイズ
  • body でフォントサイズを指定する場合は、16 をその数字に修正

 

テキストを画像置換

Compassの「replace-text」は、-119988px なのでイマイチ。

 

リストのマーカー

  • _reset.scss でマーカーを削除しているため、一部分で必要なときに便利
  • ブラウザのデフォルトスタイルを設定

 

ブレークポイント

この書き方が最も効率的。

 

clearfix

両方を用意するのは下記の理由から。

  • @include はショートカット(+ -> Tab)があるので楽
  • コンパイル後のコードが気になるなら、@extend に一括置換すればOK

 

デフォルト機能で使っているもの

lighten() / darken()

先方からのリンクカラー指定がない場合に便利。

 

ベンダープレフィックスは?

gulp で自動化しちゃいましょう。

 

これじゃ少ないのでは?

と思う人がいるかもしれないので、絶対配置をミックスイン化してみる。

順番変えた方がいいかな? いや逆の方がいいかな? と試行錯誤している時に、ふと気づいた。

普通のCSSで書いた方が早い…

普通に書いた方が楽ならそれに越したことはなく、無理をしてまでSassを使う必要はない。

 

普通に書いた方が楽なもの

上記の absolute 以外にも、ミックスインや関数を利用するより、普通に書いた方が楽なものは意外と多い。

background-image

異なるディレクトリで画像ファイル名が被るかもしれないので、パス補完をしてくれる URL Helpers は使い難い。

 

border-radius

一行で終わる。

 

box-sizing

Sassが不要。

 

box-shadow

一行で終わる。

 

linear-gradient

一行で終わる。

 

text-shadow

一行で終わる。

 

transition

一行で終わる。

 

手段の目的化に注意

150801_003

CSSだけでコーディングしていた時よりも、逆に煩雑化し非効率になっていませんか?

便利ツールを使うときは、手段の目的化にならぬよう冷静な判断を。
Web制作業界では頻繁に見かけることがあり、ため息をついています。

 

Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)
Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis
翔泳社
売り上げランキング: 252,728

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。