# 新テンプレート考察
## SASS
### sass import廃止への対応
変数の使い方がちょっと変わる。
@use @forward の利用。

参考：[@use と@forwardの違い、使い分けについて(Sass)](https://zenn.dev/taketooon/articles/fa77fcbd3ba4b9)

### パーツごとにファイルを分ける
分け方は細かくなりすぎず、おおざっぱになりすぎず、要相談。

### mixinをどこまで設定するか
普段どこまで使っているか聞いて決める。

### SCSSの変数→CSSカスタムプロパティに移行検討

$baseFont: 'Noto Sans JP';
.sample {
    font-family: $baseFont;
}

↓

:root {
    --baseFont: 'Noto Sans JP';
}
.sample {
    font-family: var(--baseFont);
}

SCSSと違い、JSなどによって変数（カスタムプロパティ）の上書きも可。

### CSS設計の前提
そもそもPCとSPでファイルを分けない。
原則１ファイル内に1パーツのデータは集約する。
こんな記事も。[CSSでメディアクエリはもう必要ないかも](https://coliss.com/articles/build-websites/operation/css/media-queries-probably-dont-need.html)
（CSS3,CSS4の記述方法でメディアクエリを分けなくてもよくなるかも。）

### classの命名規則を細かく設定すべき。

#### 前職例
> [color=#ff8800] classは2つ以上の英単語を組み合わせ、ケバブケースで命名する。（2～3が理想）
命名： [形状]-[性質]
例　： btn-menu
例　： btn-red
形状を最初に持ってくることでパーツの種類で見つけやすい。
※普通の英語ではメニューボタンとなるがclassの命名ではbtn-menuとなる。

---

## 画像
### webp対応
- **XDなどの書き出しにwebpはまだないため、変換が必要。**
参考：[サルワカwebp変換](https://saruwakakun.com/tools/png-jpeg-to-webp/)
- **webpackにて自動変換**
参考：[webpack環境で画像追加を監視して自動圧縮&WebP変換する方法](https://kakechimaru.com/webpack_imagemin/)

---

## Tailwind CSS や HTMLテンプレートエンジンについて
nodejsを使う前提ですが、CSSフレームワークやHTMLテンプレートエンジン（pug,haml,ejs）の利用の検討をしてもいいかも。
（学習コストが一番少なくてすむのはejs。）

---

## Git導入したい...
comming soom

###### tags: `CND`