cssの影響範囲について

Question

複数ページあるサイトのコーディングをしています。

元々は他の人が制作したものを
修正+新規ページ追加という形で作業しています。
自分の作業したページはbodyにクラス名をふって、
そこのスタイルをかけることで他のページに影響がでないようにしているのですが、
全てのページでバグが発生している状況です。

ふったクラス名は他と重複のないことは確認済みです。
他にどんな可能性が考えられるか教えてください。
よろしくお願いいたします。

Comments

[mutsuki22]

一度デベロッパーツールでどのクラスとかが影響しているかなどは確認済みなのでしょうか？

[mk2tnk]

確認済みです。
自分が編集したものとは全く違うクラス名がふってありました。

[m.ts10806]

「バグ」ではないと思います。
CSSで発生するのはバグではないと思います。
というか「バグ」の一言で片付けるのではなく、起きている現象をきちんと説明してください。
コードの提示も、完成形も現在形も提示されない状態では、他者が判断できる情報が全くありません。

[mk2tnk]

すいません、フッター部分のレイアウトの崩れです。

仕事の内容なことと、自分のスキルが足りないので
コードのどの部分をどの程度カモフラージュして投稿していいのか判断できず
可能性を提示してほしいという形で質問させていただきました。

[m.ts10806]

>仕事の内容なことと
でしたらそもそも報酬が発生しない場所で他者に質問すること自体がかなりグレーな領域と思います。
言い方はかなり悪くなりので申し訳ないですが、これに答えたらあなたの給料になるわけですから。
本来は上司や先輩、同僚に聞いて解決すべき範囲です。

Answer 1

ふったクラス名は他と重複のないことは確認済みです。

↑CSSのセレクタとして、.post { ... }など、bodyのクラス名から始まるように記述すると別の箇所と競合する場合があるので、body.post { ... }というように固有のタグとセットで記述したほうがいいと思います。
(WordPressなどを使っている場合もあるかもと思い、念のため。)

全てのページでバグが発生している状況です。

↑追加したCSSはファイルをわけていますか?
わけているのであれば、コメントアウトして「バグが発生している状況」ではなくなるかを確認したほうがいいと思います。

また、大々的に崩れる場合はHTMLでいうと開始タグと閉じタグ、CSSでいうと「{」と「}」の数が合わない
ことが、まず考えられます。Web上のバリデーションツールなどを利用して、初歩的な問題がないかチェックするのも試していいと思います。

レスポンシブなコーディングをしている場合、ある画面幅では「全てのページでバグが発生している」が、ある画面幅ではそうではないということがあれば足がかりになると思います。

Web上のバリデーションツール:
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/validator.html.ja

Comments

[mk2tnk]

回答ありがとうございます。
バリデーションツール利用してみます。

共通のscssファイルを編集するとバグが発生し、
自分で編集した部分のscssのみcssに展開して、
共通のcssファイルに追記という形にするとバグが起こらないことがわかりました。
なぜなのか全くわかりません。

初心者で質問が曖昧で申し訳ないです。

[maisumakun]

> 共通のscssファイルを編集するとバグが発生し、

追記したものが文法的におかしいために、コンパイル全体に影響している、というような可能性が考えられます。

[mk2tnk]

コメントありがとうございます。
文法的におかしくても、cssに展開して追記すれば問題無いケースがあるということでしょうか。

[maisumakun]

> 文法的におかしくても、cssに展開して追記すれば問題無いケースがあるということでしょうか。

別に書けば「SCSSのコンパイル」には影響しないので、別に書いた部分がうまく動作しないだけで済む、という理屈です。

[mk2tnk]

勉強になります。ありがとうございます。

Answer 2

まずは共通のCSSを自分が編集する前の状態に戻し、各ページが正常に動作することを確認してください。

「自分で編集追加した分」のCSSを共通のCSSとは別のファイルとして作成し、新規作成したページでのみ読み込ませて動作を確認してください。（別のCSSを作成することができない場合は<style>で追記するなど他の方法をとってください。）
その際コードに全角スペース、全角記号を使っていないか、括弧{}の対応が間違っていないか、;のつけ忘れがないかなど確認してください。

別ファイルでの状態で問題がなく、管理上の理由で1つのCSSにまとめる必要があれば新規のCSSで記載したものを共通のCSSに少しずつ転記していき、既存ページで「バグ」が発生することがあれば、その部分を疑ってください。

「バグ」がどんなものかわかりませんがレイアウト崩れなどでしょうか？
mutsuki22さんも修正依頼欄で指摘されてますが、デベロッパーツールなどで何が影響しているか確認することも必要です。

Comments

[mk2tnk]

ご教示ありがとうございます。
バックアップをマメにとっていなかったのが大きな敗因でした…
ご指摘事項確認させていただきます。
バグはフッター部分のレイアウトの崩れです。