開発

CSSのセレクタの使い方とSASSの必要性について。考えて使わないとデメリットとなる可能性もあるので注意

投稿日:

CSS

CSSの書き方は人によって結構クセが出ます。BEMやSMACSSのような設計を取り入れてきちんとやっている現場は別ですが、いろいろな人が手を入れてグチャグチャになっている場合も多かったりします。

CSSの構成やネーミングルールは後から変更しようとすると大変です。特に昔からあるような巨大サイトではリニューアルでもしない限り手を入れることが難しくなっています。

新規の場合はルールを決めてから作り始めることができますが、前任者が居なくなってしまって既存のものを更新しなければならないような状況では大きくいじらない方が得策かもしれません。

やたら深いセレクタ

サイトによってはやたら深いセレクタを使っている場合があります。極端に言うとこのような感じです。

普通ならtext_boxにだけスタイルを定義すればいいようなものですが、このような作りにした原因には下記のようなものが考えられます。

・その場所毎に専用のクラスを用意したい(クラスはいくら増えても構わない)
・スタイルが違っても同じ役割のクラス名を統一したい
・勝手にクラスを流用されて書き換えられてしまい、元のレイアウトが崩れてしまうことがあったのでそれを防止したかった
・きちんと整理できているように錯覚している
・現場の方針

いずれにしてもクラスの流用が難しくなるので同じようなクラスが大量に作られることになってしまいます。

現場の方針だとしたら、無理に逆らう必要はありませんが、セレクタは極力浅くしてクラスは流用できるようにしたいところです。

SASSって本当に必要?

最近ではSASSを使うことが増えてきました。

変数やmixin、ネストなどが使えて便利ですが、ブラウザで表示するためにはコンパイルが必要になるという点を考えると本当に効率的なのかは分かりません。

もちろん、そのために便利なツールも存在しているのでこれらを活用すると手間は減らせます。

mixinをKoalaでコンパイルしたCSSを見てみると、mixinを使ったクラスの数だけ同じ記述が何度も繰り返され、結果的に長くなってしまいます。

だったらSASSを使わずに最初から下記のような書き方をした方がCSSを短くすることができます。

また、変数には色などを定義しておいて一括で変更できると言っても複数人で作業していると中には変数を使わずに直接書いてしまう人が現れます。

結局置換が必要になってしまうことも多く、手放せないほどの便利さは感じません。むしろ変数名をいちいち調べる方が手間がかかってしまうため、XDからそのままカラーコードを貼り付けた方が早い場合もあります。

ネストは便利ですが、セレクタをうまく活用するなどの工夫をすればそこまでの必要性を感じることもありません。

まとめ

チームで作業をおこなう場合はいいかげんな人や自己主張が強い人がメンバー内に存在していて言うことを聞かないことがあります。

他にも既存のサイトをメンテナンスする場合は最初からいいかげんなCSSが大量に存在するといった問題もあります。

このように個人で新規サイトを構築する場合以外は思い通りにいかないことも多く、会社側も見た目さえ悪くなければ時間とコストをかけてまできちんとしたCSSを構築しようとは思わないようです。

計画的に書かれていないCSSは気分がすっきりしないだけでなく、メンテナンス性の悪化や作業時間の浪費にも繋がるので何とかしたいと思うのがコーダーとしての正しい姿ですが、管理者が伝えても理解されない場合は割り切って作業するしかありません。

また、BEMやSMACSSのような設計ルールはどれか一つを選んで厳密に守らなければいけないかと言えば、必ずしもそうではありません。融通が効かなくなって作業性が悪化してしまう場合もあるので、いいところを柔軟に取り入れたり、いろいろ組み合わせるなどの工夫をして自分たちが使いやすいルールを作っていけばいいと思います。

同じようにSASSもWEBアプリやハイブリッドアプリの場合は必須となりますが、サイトの場合は必ずしも使えばいいということでもないのでメリット、デメリットを充分考慮して必要な時だけ使うようにしましょう。

-開発
-,

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.