htmlファイルが別々の場合、cssもファイルを分けるべきか

Question

質問

railsで簡単なtodoアプリを作成しています。
タスクの新規追加ページでviewを作った後、編集ページでは新規投稿ページのhamlをコピペしたものを使っているのですが、scssのファイルでは、new.scssとedit.scssで分けた方がいいですか？それともnew_edit.scssなどというファイルを作って新規追加ページと編集ページを一つのscssファイルで管理しても大丈夫なのでしょうか？

該当のソース

新規投稿ページ

.new-task
  = form_for @post do |f|
    .task
      %p タスク
      = f.text_field :title, class: "task__form"
    .date
      %p 期日
      = f.date_select :due_date, class: "date__deadline"
    .memo
      %p メモ
      = f.text_area :memo, class: "memo__form"
    .add-btn
      = f.submit "投稿する", class: "task-btn"

編集ページ

.new-task
  = form_for @post do |f|
    .task
      %p.task__paragraph1 タスク
      = f.text_field :title, class: "task__form"
    .date
      %p.date__paragraph2 期日
      = f.date_select :due_date, class: "date__deadline"
    -# .sub-task
    -#   %p.sub-task__paragraph3 サブタスク
    -#   = f.fields_for :sub_tasks do |t|
    -#     = t.text_field :task, class: "sub-task__form"
    .memo
      %p.memo__paragraph4 メモ
      = f.text_area :memo, class: "memo__form"
    .add-btn
      = f.submit "変更する", class: "task-btn"

新規投稿ページと編集ページ

.new-task {
  margin: 30px 25%;
  .task {
    padding-bottom: 30px;
    &__form {
      width: 700px;
      height: 40px;
      font-size: 1rem;
    }
  }
  .date {
    padding-bottom: 30px;
  }
  .memo {
    padding-bottom: 30px;
    &__form {
      text-align: initial;
      width: 703px;
      height: 300px;
      font-size: 1rem;
    }
  }
  .add-btn {
    text-align: center;
    .task-btn {
      display: inline-block;
      width: 200px;
      line-height: 48px;
      background: #3CCACE;
      border: 1px solid #3CCACE;
      color: #fff;
      border-radius: 100px;
      cursor: pointer;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.task-btn:hover {
  opacity: .6;
}

p {
  font-size: 20px;
}

Comments

[miyabi_pudding]

質問者さんの記載のものは、
HTML → haml（テンプレート構文）
CSS → SCSS（メタ言語）
となりますので、覚えときましょう。
（上記各左項のものを、効率よく機能的に記述するためのものが、各右項となる）

チームでやっていますか？
もしそうなら、チームのメンバーと相談してください、としか言いようがないです。
個人でやっているなら、思うようにやったらいい、としか言いようがないかと・・・。

[tonkatsu00]

なるほど！直しておきます。
個人でやっています。基本的には個人やチームで決めることなんですね。
回答ありがとうございました。

[miyabi_pudding]

ここは回答ではなく質問修正依頼のコメント蘭になります。

機能面に関しても含めて、
m.ts10806さんが回答されていますので、
ご覧ください。

[hentaiman]

ガチガチの１：１の関係だったらいっそhtml+cssを分けずにまとめてしまっても良いかもしれないですね。

Answer 1

CSSに限らず、同じ指定のコードをあちこちに持つのはメンテナンス性を損なうので、よほどのそのページにしか使わないような設定や処理をしない限りは共通でいいです。
それに1つのファイルに書いてたとしても単に使わない設定があるというだけで、それが何百行何千行にわたるのでなければ、個別の設定も共通に持っておいて差し支えないかと思います。

「ユーザー用と管理者用」など機能がガッツリ違う場合は分けた方が良いです。
役割分担の観点から考えてみてください。

Comments

[tonkatsu00]

確かに、同じ内容ファイルがあっても意味ないですよね。
回答ありがとうございます。

[m.ts10806]

そこも要件次第というか、仕事でしているなら「ルール次第」というか。
一般的な考え方と「決め」の問題は必ずしも一致しませんので。