こんにちは、デザイン部のSUです！

今回は特別なイベントもないので、普段社内で出ている「こうだったらいいのにね～」を完全な主観でお話していこうと思います！

なんでこんなCSSにしちゃったの？？

これは主にエンジニア・webデザイナーがよく直面すると思うのですが、こんなCSSを見たことはありませんか？

例えば↓

• HTMLに直書きのstyle
• 主に広告に入れられている「z-index:99999999999999;」
• 多用される「!important」
• 汎用性が高すぎるclass名「center」「float-right」へのスタイル追加
• 要素に直接スタイルあててる「p{ color: red;}」
• 「font-size: 8px」
• 2行のCSSを囲むコメント「/* ここから〇〇 */」「/* ここまで〇〇 */」
• ダサ&バカid名「#komento_eria」

などなど…

例を挙げればキリがないですがこんな感じです。

こんなのを見ると、自席で「あ～あ～～」となっています。

なにが悪いの？？

こういうのを書く人は何が悪いのか分かってないか、めちゃくちゃ時間がないかのどっちかだと思うので、何が悪いのか以下解説です。

?HTMLに直書きのstyle

→CSSファイル開くの面倒だし分かる。

けど、直書きが最優先されてしまうので、その場ではよくても改修時に上書きのために、同じことを書いてるファイルすべてに手を加える必要があるため手間がかかります。

class付与してくれてたらCSSファイル1個だけ改修で済むのに…。

?主に広告に入れられている「z-index:99999999999999;」

→最大値は「2147483647」ですが、大きけりゃ一番上載るっしょ！みたいな考えでこういうの書く人多いです。

99999999999999はやりすぎでも、「10000」とかはザラにいます。

一番上に載せなければならないのは分かるので仕方ないですが…。

ハンバーガーメニューやモーダルなど、機能上広告の上に来なければならない要素などもあるので、そういう場合はscriptで無理やり「display:none」や「z-index:1」とかにしてます。

その分少し工数かかるからできれば100くらいに抑えてくれると助かります。

?多用される「!important」

→なんでもかんでも最優先してたら本当に優先すべきものが見えなくなってしまうので！

CSSファイルのもっと下に書けば優先されるよ！とか、classじゃなくてid指定なら優先されるよ！とかいうことがけっこうあるので、もう少し全体見てから使ってほしいです。

?要素に直接スタイルあててる「p{ color: red; }」

→本文全部赤くなっちゃってるよ～！と発狂してしまうので、スタイル入れたい要素にはclass名を付けるが原則です。

(もちろん本文を全部赤くしたい場合もあるので、その場合は全然OKです。)

?汎用性が高すぎるclass名「center」「float-right」へのスタイル追加

→色んなところで色んな使われ方をしているので、そこにスタイル追加していってしまうと色んなところで表示崩れるかも！！という危険信号です。

そういうのにスタイル追加したいときは、親要素+汎用性高classなど、変更したい箇所だけ見極めるといいかなと思います。

?「font-size: 8px」

→小さくしたいのは分かるけど読めないよ＆chromeでのフォントサイズ最小値は10pxです。

ベンダープレフィックス使ってまで8pxにしたいものなのか？と一度立ち止まって考えてみてから使いましょう。

?2行のCSSを囲むコメント「/* ここから〇〇 */」「/* ここまで〇〇 */」

→わかりやすくしてくれてる親切心は分かる。

でも読めばわかるしソース量増えちゃうしダサダサかも！100行くらいにわたるものを囲むならまだしも、数行のものはいらないかも！

?ダサ&バカid名「#komento_eria」

→小学生かな？となってしまうのでやめてほしいです。

と、こんな感じで現場が怒っているよ～というのを知っていただきたかった記事でした！

これからコードを書く人・書いてる人は、実装時のことだけじゃなくて、実装後・改修のことも考えてスタイルをあててくれると助かります?

CSS以外には「夕方に言われる納期今日中」「仕様変更どころじゃない全改修」「なんでもっと早く言ってくれなかったかな、リリース後のタイポ」「もうアウトライン化しちゃったよバナー文言変更」などがあるので、ネタがないときにお話していこうかと思います?

一緒に働きたいと思った方は、こちら➡から！！！

文：デザイン部SU