一周回ってCSSが便利という話

どうも、くまだ です。

私は、コーディングをする時、基本的にSassを使っています。

VSCodeの拡張機能やGulpなどを使ってコンパイルして使用しています。 ですが、とある案件を通して、Sassを使わず一周に回ってCSS で書くのもアリかも、ということがありました。(個人の感想です)

 理由は以下になります。

  • 解読性が高い(&とか入れ子をつかわない 一目でわかる)
  • クラス名コピペ(コーディング速度にもかかわる &に書き直さなくてもよい)
  • ファイル管理が楽(Sassほどcssファイルをつくらなくてもよい)

Sassのメリットは、場合によってはデメリットにもなりえる 

Sassは、CSSとは違うメリットがあります。ただ、メリットが存在するということは、同時にデメリットも存在することになります。(時と場合によっては、そのメリットはデメリットになってしまう)

 -Sassの入れ子と& –

まず、Sassといえば入れ子にしてかけるこがメリットです。

.header {
   &__title {

   }
   &__inner {
  
   }

   &__logo {
   
   }
}

こんな感じで書くことができます。&をつかってクラス名の一部を省略して記述することができます。

Sassを知らない人のために簡単に解説すると、VSCodeの拡張機能やGulpなどを使ってコンパイル(CSSの記述に書き直す)すると上で書いたコードが、下のようなCSSとして出力されます。

.header__title {

}

.header__inner {

}

.header__logo{

}

これはSassでよくつかっていると思うし、これこそがSassを使うメリットではあります。

ですが、これのデメリットは以下のようなものが考えられます。

  • 入れ子しすぎると、解読性が低下する
  • HTMLのクラス名コピー→Sassにペーストで、class名の一部を&に書き直す手間がある

一度は経験したことがあるかもしれませんが、入れ子しまくると、ワケが分からなくなりませんか?(私はあります。。。)

最初のうちはいいんですけど、下のほうにいくとだんだん今書いている入れ子はどこの部分だろう?みたいなことに。

そしてclass名を一部省略して&で書く、というのもひと手間です。ちりつもで余計時間がかかることになります。

さらに、あとから見返したとき、&__●●の&はどこを指しているのだろうか、みたいな感じで確認しなければならない、と。(パッと見でわからない)

コーディング速度を重視するなら(とくに時間単価を気にするなら)、この辺りもちょっとSassの便利機能もデメリットになるかも、と思いました。

-Sassのファイル管理-

Sassは、ファイルを分けて管理することができます。

こちらもSassを使う上で大きなメリットの一つだと思います。

例えば、_color.scss、_font.scss、_mixin.scss、_button.scssなどパーツや用途をわけて管理し、それをstyle.scssにまとめることができます。

しかしこちらもメリットにもなりえるがデメリットにもなります。

  • Scssファイルが増えまくる

これはしょうがないことなのかもしれませんが、パーツや用途にあわせてファイルを作っていくとファイルが膨大になっていきます。(時には数十個、なんてことも)

ファイルを探すのが大変なことと、PCの画面が狭いとファイルで画面が圧迫します笑

というわけで、Sassのメリットは、場合によってはデメリットにも十分なり得るということがわかりました。最もこういう話はSassに限らずの話でしょうが。決してSassアンチというわけではなくて、どんな物事にもメリットデメリット両方存在するということが言いたかっただけです。

Sassの便利機能使わなくてもわりとコーディングはいけます。

一周まわってCSSでもいいんじゃないか

というわけで一つの案ですが、一周回って最初からCSSで書いてもいいんじゃないか、という考えです。

  • 解読性が高い(&とか入れ子をつかわない 一目でわかる)
  • クラス名コピペ(コーディング速度にもかかわる &に書き直さなくてもよい)
  • ファイル管理が楽(Sassほどcssファイルをつくらなくてもよい)

オマケでもうひとつ。

  • CSSを修正となった場合、一度ローカルに落とし込まなければならない

CSSはSassと違って入れ子にして書くことができないので、それがために逆にCSSが読みやすいです。&__○○みたいなことも書かないので、クラス名を一目見て分かるわけですね。

そして&を使わないということは、htmlのclass名を全コピしたものそのまま使えるわけですから、書き直す手間もないので速度も早くなるだろう、という見込みです。

Sassほどファイルを無数につくらなくてもよい、というのもあります。

とはいえ、今さらせっかくSassで書いてきたので今さらCSSで書いていくのもなあ、と。 (Sassに慣れすぎてしまった弊害)

でもSassを使わずCSS だけでやっている人も現実にはいらっしゃるわけです。

人それぞれいろんなやり方があるように思います。現状、私はSassを使っているので(今さらCSSで書くのもすこしめんどう笑)その利便性を活かしつつ、少しでも改善するには自分が考えられるとすれば、

  • &や入れ子の描き方を辞めること

かなと思います。

ファイル管理はたしかにファイルが膨大になるということは分かりますが、そこまで辞めてしまったらSassを使っている意味がないような気がしてならない、、、

というわけで個人的にはSassは使い続けますが、&を使わない書き方や、入れ子しまくらない(通常のCSS式の記述で書く)というやり方にも慣れていこうかと考えます。

ここまで読んでくださりありがとうございました。

この記事を書いた人