JSFiddle（ Editor 画面）の CSS を読む

Editor 画面で Minify されていた CSS を DirtyMarkup: CSS Beautifier で適当に整形して読んだ。JSFiddle は普段からよく使っているが、今回コードを読むときにサイトの表示はあまり見てない。

CSS は整形後 700行くらい。

アンチエイリアスを抑えてフォントをきれいに見せる。

*, body, button, html, input, select, textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

リンクの状態変化は :hover だけで指定。:hover, :visited, :active みたいな指定はしてない。

a {
  ...
}

a:hover {
  ...
}

font-family の指定にはまたしても Fira Sans がいた。

#app-updates や #sidebar など、その他にも多く ID セレクタが見てとれた。#id .class の指定が多い。BEM は使われておらず、カスケーディングを基本としたセレクタの指定。

単位は px が基本。

透過させた色を表示したいときは hsla() を使ってる... と思いきや rgba() も使っており、混在。

font-weight はキーワードじゃなくて数値の指定。400 と 700 、ときどき 600 。

svg 要素に視覚的調整と思われる top: -1px の指定を発見。

突如あらわる !important 。

#actions .actionItem a.aiButton span {
  margin-right: 6px!important;
}

nlog