最近、Twitterのリンク共有ボタンのクラス名が変わった。twitter-share-buttonというのが追加されたかなんかしたのだと思う。このクラス名を自分のウェブサイトの別の所でも使っていたので、表示が崩れてしまった。こういう衝突はなかなか避けられないものだとは思うけど、ウィジェット提供側で少し気をつけてくれるとその機会は大きく減るんじゃないかと思う。
Twitterのリンク共有ボタンはtwitter-、Facebookのいいねボタンはfb_というプリフィックスをそれぞれ付け、いくつかクラス名を振っているだけ。対して、Googleの+1ボタンはクラス名はなく(設置コードにあるg-plusoneというのは消える)、代わりにIDがあり、更に頭にアンダースコアを3つ付けた___plusone_というプリフィックスを使っている。この実装だと、まずかぶるということはない。
サービス固有であることだけでなく、かぶりにくいプリフィックスを使って欲しいということだ。ボタンごとにユニークになるIDだと、スタイルの追加や上書きをしたい時に先頭マッチのセレクターの使用を強いられたりと面倒そうなので、クラス名で良いとは思う。
ドキュメント製作者がサードパーティのウィジェットを考慮して、避けるべきクラス名を頭に入れておくというのは馬鹿げている。向こうの気まぐれに左右されるような状態を良しとはしたくない。好きに書きたい。
ウィジェット提供側も「なんか崩れたから外しました！」とされる状況に陥る可能性を減らせるのではないだろうか。将来的にはstyle要素のscoped属性とall: initialの合わせ技が使われるようになるんだろうけど、それまでは……という感じ。