十分な大きさや余白、適度な影を使って、「ボタンである」「テキストである」と示すことが大切です。
文字には十分な大きさをもたせましょう。フォントの種類は少ないほうがまとまりが出やすいです。
機能を整理していくと、グループごとにナビゲーションなどへ格納する必要性に迫られます。ただし、格納の仕方を誤ると、使いにくいサイトやツールになってしまう可能性があります。
そのサイトのブランディングに用いる色（ロゴや文字、背景の色）以外にも、注意やキャンセル、実行を示すカラーリングを明確にし、目的外でその色を使わないようにしましょう。
たくさんの選択肢は、ユーザを満足させるより、迷わせることの方が多いでしょう。
コンポーネント（component）とは、部品や成分を意味する英単語です。ウェブデザインの世界では、ボタンや見出しなどのスタイルに合わせてパーツ化しておくことを指す場合が多いです。各デザインツールに「コンポーネント」という機能が備わっている場合もあります。
コンポーネント化しておくことのメリットとしては、再利用性があげられます。また、反復の役割を果たすことで、デザインの一貫性も保たれます。
Atomic DesignはUI設計の考え方のひとつです。2017年頃に登場した概念です。
詳細はこちらの記事などに詳しいのですが、ウェブデザインを小さなパーツからコンポーネント、ページへという段階を踏んで考えていくと一貫性を保ったサイトになる、という考え方だと理解しておくと良いでしょう。
CSSを設計する際に意識するポイントは以下の3つです。
その上で必要なことを下記に述べます。
命名規則が統一されていれば、HTMLを書いている時にクラス名を何にするか悩まなくなり、素早くHTMLのマークアップを行えるようになります。
class名を数字からはじめてはいけません。（わからないし、効かない）
複数の単語を組み合わせる場合はハイフンかアンダースコアが必要になります。
まずはclass名を見たらどこの何かがわかるようにclass名をつけることからはじめましょう。
BEM（ベム）は、Block、Element、Modifierの頭文字をとったもので、厳格なクラスの命名規則が特徴のCSS設計です。要素の再利用がしやすい・クラス名で悩まなくなる代わりに、クラス名が冗長で、全ての要素にクラス名を付与するのでHTMLが読みにくくなります。
ほかにもOOCSS（オーオーシーエス）、SMACSS（スマックス）などが有名です。
OOCSSを採用している有名なフレームワークとして、Bootstrapがあげられます。
CSSには@で始まる@ルール（at-rule）と呼ばれる書式が定められています。 これらはCSSでスタイルシートを記述するにあたってのルールを定義するものです。
以下はすべて同じ意味です。（どれで書いてもok）
@import url("sample.css");
@import url('sample.css');
@import url(sample.css);
@import "sample.css";
@import 'sample.css';