【Sass】境界線をどこに引くのかについて解説

CSS
2020.06.13

こんにちは、かつコーチです。

CSSをより効率よく記述するのに、Sass(Scss)を利用することは一般的です。

基本的にはファイルを分けて記述すると思いますが、その境界線をどこに引くのか悩むことがあるでしょう。

今回は、その境界線をどうするのかについて解説します。

境界線をどこにするのか？

境界線をどこに引くかはプロジェクトの性質やチームのルールによって変わりますが、

基本的な考え方としては、スタイルの責務を分けて管理することが重要です。

以下のようなルールに従うと、メンテナンスしやすいコードが書けます。

コンポーネントに関するスタイル (cards.scss)

components/cards.scssには、Cardコンポーネント自体のデザインに関連するスタイルを記述します。

具体的には以下のようなものがここに含まれます。

  • デザインに固有のスタイル:
    • 背景色、ボーダー、シャドウ、角丸などCardの見た目に直結するスタイル
    • Card内のテキストや画像のスタイリング（フォントサイズ、色など）
    • Cardの内部構造に関するスタイル（例えば、.card-header, .card-body, .card-footerなどの分割）

例：

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.25rem;
  font-weight: bold;
}

.card-body {
  padding: 16px;
}

ユーティリティクラスでのスタイル (utilities)

utilitiesは、共通して使える汎用的なスタイル（パディング、マージン、位置調整など）を管理します。

特定のコンポーネントに依存せず、他の部分でも再利用可能なスタイルは、ここに置くのが一般的です。

Cardの外枠のpaddingやmarginの設定は、汎用的で再利用できる場合が多いので、

これをユーティリティクラスにするのは良い考えです。

例：

// utilities/_spacing.scss
.u-mb-16 {
  margin-bottom: 16px;
}

.u-p-16 {
  padding: 16px;
}

これをHTMLで使用することで、同じマージンやパディングを他の要素でも再利用できます。

<div class="card u-mb-16 u-p-16">
  <div class="card-header">Header</div>
  <div class="card-body">Body content</div>
</div>

ページ固有のスタイル (about.scss)

ページ固有の調整や、他のコンポーネントの特定ページにおける配置やカスタマイズは、

pages/about.scssのような場所に記述します。

例えば、position: absoluteや特定の場所でだけ行うスタイル調整が該当します。

  • 例えば、Cardを特定の場所に配置したい場合、その位置調整だけをabout.scssに記述します。
// pages/about.scss
.about-page .card {
  position: absolute;
  top: 50px;
  left: 100px;
}

境界線を引く基準

境界線を引く際の判断は、再利用性と責務の分離に基づいて行います。

以下の点を意識すると、明確に分けやすくなります。

  • コンポーネントの固有スタイル（見た目、内部構造に関連するもの）は、そのコンポーネントのスタイルファイル（components/cards.scss）に記述します。
  • 再利用できるスタイル（マージン、パディング、フレックス、テキストセンタリングなど）はユーティリティクラスにします。これにより、コードの冗長性を減らし、再利用可能な設計が可能です。
  • ページごとのカスタマイズや位置調整は、そのページ固有のスタイルファイル（about.scssなど）に記述します。

プロジェクトごとのカスタマイズ

大規模なプロジェクトでは、ユーティリティの使い方を厳格に管理するか、柔軟に運用するかは

チームの好みやプロジェクトの要件次第です。

たとえば、ユーティリティクラスを多用するBEMやOOCSSのような設計パターンもありますし、

コンポーネントにスタイルをすべて閉じ込めるAtomic Designのような考え方もあります。

  • 規模が小さい場合：1つのコンポーネントにできるだけ関連するスタイルを閉じ込めても良いです。特に、ユーティリティクラスを作るのが面倒な場合や、コンポーネントがページごとに少しずつ異なる場合。
  • 規模が大きくなる場合：再利用性を高めるために、ユーティリティクラスを積極的に活用します。大規模なプロジェクトでは、どこでスタイルが適用されているかをすぐに理解できるようにし、スタイルの重複を避けるためにユーティリティクラスを使うのが効果的です。

結論

カード自体のデザインや構造はcomponents/cards.scssに記述し、

再利用可能な外部のスタイル（マージンやパディング）はユーティリティクラスを使用するのが良い選択です。

ページ固有のレイアウトや配置の微調整はabout.scssのような

ページごとのスタイルファイルで行うことをお勧めします。

プロジェクトごとにルールをカスタマイズしつつ、

コードの一貫性と再利用性を意識して境界線を引くと、

スケーラブルで維持しやすいSass設計ができます。

タイトルとURLをコピーしました