人の CSS を読む

• https://evilmartians.com/chronicles

html {
  font-size: 1.6666666666666667vw;
}

font-size を vw で指定してるのが気になったので、Minify されていた CSS を DirtyMarkup: CSS Beautifier で適当に整形して帰り道に読んだ。サイトの表示はあまり見てない。

---

整形後の CSS は 1200 行くらいだった。

601px 以上幅があるウィンドウの font-size に 1.666...vw が適用される。

小さい幅で一度 font-size を 14px まで縮めているけど、さらに小さい幅ではまた font-size を 17px にあげているのはなぜだろう。

@media (max-width:600px) {
  html {
    font-size: 14px
  }
}

@media (max-width:400px) {
  html {
    font-size: 17px
  }
}

印刷用の CSS があり、font-size は px で指定されてた。

@media print {
  html {
    font-size: 14px
  }
}

サイズの値は vw, px, em, % と様々な単位で書かれているが、以下のような指定を見ると値は意図的に使い分けているように見える。top: -2px の指定などもあり、視覚的な調整がされてるところも多い。

h2 {
  margin: -.8333333333333334vw 0 1.3333333333333333vw -2px;
}

宣言ブロックの最後の宣言のセミコロン（ ; ）は省略されており、少々特殊な書式。

あとクラス名は BEM でつけられているけど、カスケーディングや要素セレクタへの直接指定も多い。単語つなぎはハイフン。

あ、知らないプロパティと値。

text-rendering: optimizeLegibility;

transform をつかったアニメーションが複数。

モニターくらいのサイズを想定した指定もあり。

@media screen and (min-width:1401px) {
  ... 
}

opacity: .01 が見た目にどういった影響を与えるのか興味深い。

.post-list .post-cover {
  opacity: .99
}

line-height は基本的に font-size に対する相対値か px だったが、一部 vw で指定しているところがあった。

空白を含む font-family の指定でもそのまま書かれており、クォーテーションで括られていなかった。

.post code {
  font-family: Fira Code, Lucida Console, Monaco, monospace;
}