そのjs、cssで代用できませんか？（件数通知バッジ編）

webアプリケーションエンジニアからフロントエンドエンジニアになって約一年やってきた中で、
どうしたらjsを書く量を減らせるか？みたいな状況を解決した時のtips

why 件数通知バッジ

皆さん通知バッジ作ってますか？僕は作りました。
脳筋コードで書いたら意外とめんどくさいんですよねあいつ。

• 数字が変わるとなると、疑似要素でやるのがめんどくさいので<span>とかで作りがち
• 0件になったら消さなきゃいけない

とかやってるとjsがとても汚くなって悲しくなったので、いい感じにcss交えて書くといい感じになったよっていうお話です。

コード

See the Pen 通知バッジ by さむとる (@sumtrue) on CodePen.

jsはdata-numを++/--するだけで済んでるので、とても綺麗で読みやすいコードになりました

tips

attr()

https://developer.mozilla.org/ja/docs/Web/CSS/attr
htmlに付与された属性を取得できる関数。
今回はこれを使うことでjsとhtmlの繋ぎこみをしている。

まだ使ったことはないが型指定とか代替値も指定できる便利屋さん。
要素によって少しだけ変わることがある、みたいなのを実現もできる。

属性セレクター

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
htmlに付与された属性でcssをあてることのできるセレクター。
今回は0件のときにバッジを非表示にする際に使用。

その他オススメの使い方としてはこれ。

Tip: highlight images missing alt text with img:not([alt]) pic.twitter.com/zgjdE5iTU6

— Addy Osmani (@addyosmani) February 2, 2020

`img:not([alt])`でaltが指定されていない画像を見つけられるというやつ

この記事を書いた理由的な

「ぶっちゃけjs書けばなんでもできるじゃん」論者だったんですが、CSS組み合わせることでコードの可読性がめっちゃあがります。
「普段あまりcssはほとんど書かないけどjsは時々書く」「jsは基本書かないけどcssは結構書くよ」みたいな人たちに、
それぞれで何ができるかを知ってもらい、世の中のコードが綺麗になったらいいなと思った次第。