目次
SCSSのフォルダ整理を考えてみた
プログラミングしていて、初心者（自分がそうだった）にあるあるが、
- ながーい行のコードになってしまうこと（分割していない）
- 同じ処理が重複し書いている
- コメントが少ない
これですねー
あわせて読みたい
ホームページ作成 ３回目
【ホームページ作成 ３回目】 はやくも今回で、終わりになります（笑） 最後にアニメーションをつけて終わりとなります。 アニメーション用CSS まずは、アニメーション...
トップページ１ページを作成しただけでも、1300行近くにもなります。なので、ちょっとした修正をするのもどこに書いてあるかを探すところから始まります。
こういった、見やすさや保守性を高めるために出てきたのがSCSSですね。
目的ごとにファイルを分ける
では、どんな風に分けると分かりやすいかを考えてみました。
考える条件は、
- スマホで見るユーザーが多い
- 目的別でファイルを作る
- コードはなるべく重複しないようにする
- モバイルファーストで考える
これで、考えて構成をしてみました。
こんな感じにしてみました。
レスポンシブって調べるとめっちゃパターンがありますね💦
作成としては、Baseとしてスマホの縦で作ってから、そのほかのデバイスできれいに見れるようにSCSSを追加するっていうイメージです。
モバイルが一番CSSは単純だから基本とするといい
モバイルファーストの利点としては、CSSが一番少ないからです。パソコン用の画面から作ると、「これは横に並べて」「これは、画像が左で右に文章」とかいろいろ画面が広いのでできます。
そうすると自然にCSSは増えていきます。
もしパソコンから作った後にモバイルに対応を入れていくと、「横並びになったら小さすぎて見えないな」とかで打ち消すためのCSSを書く必要がある場合がでてきます。
なので、モバイルファーストがいいとされています。
・・・が、正直どっちでもいい気はしています（笑）
コメント