複数のhtmlに対してのscssを用いたデザインの仕方

Question

はにわマンさんの模擬サイト
現在上記のサイトをhtmlとscssを用いて模写コーディングをしています。
上記のサイトを見て頂ければわかると思うのですが、「トップページ、医院紹介、診療案内、院長・スタッフ紹介、アクセス」となっておりそれぞれ別のhtmlで作られていると思います。
これらはそれぞれ内容が違うためそれぞれにscssを用いてレイアウトを作っていかなければならないと思うのですが、それぞれの項目ごとのhtmlに対して新しくscssのファイルを作った方がよいのか、それぞれのbodyタグにclass名をつけて一つのscssで管理すれば良いのか(この場合だとscssのファイルがとても長くなってしまいますがそれはいいのか）、それとも他にもっと効率的な方法があるのならばその方法も知りたいです。
ご回答よろしくお願いします。

Answer 1

ページの読み込み速度などを考える場合は、「index.scss →　index.css, access.scss → access.css」などページごとにcssのファイルの読み込みを行う方が良いですが、特にこだわりがない場合、「common.scss」などに

@import 'index.scss'
@import 'access.scss'

などのようにして

<link rel="stylesheet" href="common.css">

全体の読み込みで良いと思います。scssだったら@importを使用すればファイルの分割も行うことができるので、一つのファイルに長くなるのも防ぐことができます。

個人的には全体で読み込みを行うほうがhtml側のcssの記載ミスは少なくなるので、全体的で読み込む方がよいと思います。

全体で読み込む場合、flocssやBEMなどのCSS設計に沿って行えばclass名の衝突もなくなります。

Comments

[augsup]

ご回答ありがとうございます!!
調べてはみたのですが、いまいち@importの使い方がわかりません。
それぞれにscssのファイルを作ってそのファイルごとにレイアウトをして@importで読み込むということでしょうか？
それとも一つのscssのファイルの中で別々のhtmlに対してレイアウトができるのでしょうか？
お手数ですがもう少しだけ詳しく教えて頂けないでしょうか？

[jackmiwamiwa]

@import文についてですが、
「common.scss, style1.scss, style2.scss」が同一ディレクトリにあるとして

- style1.scss
```scss
.p1 {
color: #00f;
}
```

- style2.scss
```scss
.p2 {
font-size: 20px;
}
```

- common.scss
```
@import 'style1.scss'
@import 'style2.scss'
```

の場合、出力されるcssが

- common.css
```css
.p1 {
color: #00f;
}
.p2 {
font-size: 20px;
}
```
のように作成されるものです。
ですので、複数のscssファイルで一つのcssファイルを管理することになります。

@importの詳しい説明については
https://chot.design/sass/73c8cf24b077/
を参考にしていただければと思います。

[augsup]

ご回答ありがとうございます！！
コメントに写真が貼れないため自己解決のところに自分なりに考えて＠importを使ってみたのですがこれであっているでしょうか？

[jackmiwamiwa]

stylesheet.cssの中に_clinic.scssの内容があれば反映されていると思います。

[augsup]

ありました！
ありがとうございます！！

Answer 2