こんにちは！縁紡ぐです。
プログラミング学習をしている人が多いと思いますが、『ファイル構造ってどうするのが正解なの？』と悩んだことありませんか？
本記事ではどのようにフォルダ整理をしたらよいかを解説しています。ぜひ参考にしてみてください。
目次
SCSSのフォルダ整理を考えてみた
プログラミングしていて、初心者（自分がそうだった）にあるあるが、
- ながーい行のコードになってしまうこと（分割していない）
- 同じ処理が重複し書いている
- コメントが少ない
これですねー
縁紡ぐ
404: ページが見つかりませんでした | 縁紡ぐ
初心者必見！業務効率化を目指す方を応援します。こちらはパソコン苦手、でも業務を効率化したい・・・今はやりのDXに取り組みたい・・・と思っている方向けに情報発信をし...
トップページ１ページを作成しただけでも、1300行近くにもなります。なので、ちょっとした修正をするのもどこに書いてあるかを探すところから始まります。
こういった、見やすさや保守性を高めるために出てきたのがSCSSですね。
目的ごとにファイルを分ける
では、どんな風に分けると分かりやすいかを考えてみました。
考える条件は、
- スマホで見るユーザーが多い
- 目的別でファイルを作る
- コードはなるべく重複しないようにする
- モバイルファーストで考える
これで、考えて構成をしてみました。
こんな感じにしてみました。
レスポンシブって調べるとめっちゃパターンがありますね💦
作成としては、Baseとしてスマホの縦で作ってから、そのほかのデバイスできれいに見れるようにSCSSを追加するっていうイメージです。
モバイルが一番CSSは単純だから基本とするといい
モバイルファーストの利点としては、CSSが一番少ないからです。パソコン用の画面から作ると、「これは横に並べて」「これは、画像が左で右に文章」とかいろいろ画面が広いのでできます。
そうすると自然にCSSは増えていきます。
もしパソコンから作った後にモバイルに対応を入れていくと、「横並びになったら小さすぎて見えないな」とかで打ち消すためのCSSを書く必要がある場合がでてきます。
なので、モバイルファーストがいいとされています。
・・・が、正直どっちでもいい気はしています（笑）
コメント