SCSSのフォルダ整理の仕方を考えてみた

目次

SCSSのフォルダ整理を考えてみた

プログラミングしていて、初心者(自分がそうだった)にあるあるが、

  • ながーい行のコードになってしまうこと(分割していない)
  • 同じ処理が重複し書いている
  • コメントが少ない

これですねー

あわせて読みたい
ホームページ作成 3回目 【ホームページ作成 3回目】 はやくも今回で、終わりになります(笑) 最後にアニメーションをつけて終わりとなります。 アニメーション用CSS まずは、アニメーション...

トップページ1ページを作成しただけでも、1300行近くにもなります。なので、ちょっとした修正をするのもどこに書いてあるかを探すところから始まります。

こういった、見やすさや保守性を高めるために出てきたのがSCSSですね。

目的ごとにファイルを分ける

では、どんな風に分けると分かりやすいかを考えてみました。

考える条件は、

  • スマホで見るユーザーが多い
  • 目的別でファイルを作る
  • コードはなるべく重複しないようにする
  • モバイルファーストで考える

これで、考えて構成をしてみました。

こんな感じにしてみました。

レスポンシブって調べるとめっちゃパターンがありますね💦

作成としては、Baseとしてスマホの縦で作ってから、そのほかのデバイスできれいに見れるようにSCSSを追加するっていうイメージです。

モバイルが一番CSSは単純だから基本とするといい

モバイルファーストの利点としては、CSSが一番少ないからです。パソコン用の画面から作ると、「これは横に並べて」「これは、画像が左で右に文章」とかいろいろ画面が広いのでできます。

そうすると自然にCSSは増えていきます。

もしパソコンから作った後にモバイルに対応を入れていくと、「横並びになったら小さすぎて見えないな」とかで打ち消すためのCSSを書く必要がある場合がでてきます。

なので、モバイルファーストがいいとされています。

・・・が、正直どっちでもいい気はしています(笑)

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

「@縁紡ぐ」にご訪問頂きありがとうございます。
業務改善やIT化、システム開発・プロジェクトチーム運用支援を行っています。
お気軽にご相談ください。

コメント

コメントする

CAPTCHA


目次
閉じる