nlog

とめどなく流れるよだれ

CSSの基本、構文と意味をMDNから学び直す

構文

プロパティと値のセットが宣言、宣言を中括弧({、})で包んだものが宣言ブロック、スタイルを当てる場所を指定するのがセレクター、セレクターと宣言ブロックを合わせて規則セット(規則)、という。

@-規則

@documentに期待。

inheritance

非継承プロパティの説明にあるborderの例はなるほど。ショートハンド使ったときに起こり得そうなミスなので気をつけよ。

一括指定プロパティ

一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます

意図せず上書きする、なんてことが起こりがち。

fontプロパティのfont-sizeとline-heightのように、中には構文が複雑(覚えづらい)ものもあるので、できればショートハンドを使った指定は避けたい。

詳細度

:notは疑似クラスとして詳細度はカウントされないけど、:notの中で指定されたセレクターは詳細度としてカウントされる。

:notは便利な使い方もあるけれど、コードを見ても何をやってるか瞬時に判断しにくいという問題がある。そもそもあまり使われないかもしれない。

また、CSSの詳細度はあくまで型ベースで決まる点を覚えておきたい。#fooと[id="foo"]は同じ場所をあらわすセレクターだが、#fooがIDセレクターなのでこちらのほうが優先される。

値の定義構文

「構成値の組み合わせ」を理解しておくと、MDNなど、CSSの仕様を読むときに役立つ。