CSSで知って置くこと

セレクター・プロパティ・値

あとで

CSSの優先順位

あとで

疑似クラスと擬似要素

あとで

カスタムプロパティが便利

「:root」にカスタムプロパティ「--xxxxx:値;」を記述しておくことで、ページ全体共通値が一括管理できます。
なおかつ、JavaScriptでカスタムプロパティの値を変えることで、即ページ全体に反映されます。この味を占めたフロントエンジニアは後戻りできなくなります。
この動的にカスタムプロパティを利用した事例をリバエンしてみてください。
ところでSCSSのグローバル変数の方がいいじゃないかという意見も聞かれますが根本的に違います。それはSCSSのグローバル変数はブラウザで実行時に静的なのです。SCSSのグローバル変数はコンパイル時には動的な振る舞いをしますが、コンパイルされたCSSでは静的なのです。つまり静的なウェブページなら有効ですが、動的はウェブページ(Dynamic HTML)には向きません。

ブラウザのuser agent stylesheet

これがスタイルの既定値です。厄介なのは、ブラウザによって既定値が異なることです。

余白や文字の設定を全てリセットしておきます。事例はいっぱいあります。
事例によってリセットに癖があります。
・imgセレクターをブロック要素にしてしまう
・margin,paddingをゼロにリセットしきれていない
等々
案件を取り扱う場合は、ユーザー環境で使われているリセットCSSを使う事でトラブル回避したほうが良さそうです。

引っ張ってきたリセットCSSに追記していること

html {
	/* トップのhtmlにwidth指定を行っておかないと、子要素のbodyのwidth指定で%指定が効きません。 */
	width: 100%;
	height: 100%;
	/* サイト全体で統一ならリセットCSSの中に記述しておく */
	font-size: 0.9em;
	font-family: arial, sans-serif;
}

色の指定を行っておきます。

色を纏めて指定しておくで、サイト全体のカラー調整が楽になります。

:root {
--basic-text-color: rgb(0,0,30);
--bright-text-color: rgb(100,100,255);
--outline-text-color: white;
--underline-color: rgb(52,70,255);
--active-background-color: rgb(147,165,217);
--dark-background-color: rgb(70,95,171);
--basic-background-color: rgb(93,116,186);
--bright-background-color: rgb(201,211,242);
--clear-background-color: rgb(225,232,252);
--link-text-color: rgb(0,0,255);
--link-hover-background-color: rgb(0,0,255);
--link-hover-text-color: gb(255,255,255);
--outlined1-background-color: rgb(237,242,255);
--outlined2-background-color: rgb(168,183,227);
--outlined3-background-color: rgb(70,95,171);
--mosaic_container-color: white;
--menu-background0: rgb(93,116,186);
--menu-background1: rgb(168,183,227) 0%, rgb(147,165,217) 10%, rgb(70,95,171) 100%;
--top-img-background: 0deg, rgba(201,211,242, 0.95), rgba(201,211,242, 0.6) 30%;
}