PC用のCSSを流用したとき、SP版のCSSの制作がしづらいのをどうにか改善したい

要求

前提として
あまりCSSのコードをいじりたくありません。
理由としては、組織で使っているテンプレートなので、ある程度、原形を保ったまま制作したいです。
また、納期が短いということなので、PC版のメディアクエリを外しCSSを流用し、SP版はメディアクエリで調節しろとのことです。

問題

PC版では必要だが、SP版では必要ない疑似要素が多く毎回毎回消すのが難しいです。

例えば

pタグの前後にafter, beforeで疑似要素を埋め込んだとします。
SP版ではその疑似要素は必要なく、邪魔で干渉してしまい、ノーマルであれば適用される装飾が適用されなかったりします。
下記のPC版コードを実際に表示させてみると、変な風に表示されると思います。

html
1<div class="container">
2    <p class="item">ダミーダミーダミーダミーダミー</p>
3</div>

CSS
1.container {
2　　padding: 80px 0 0;
3    margin: 0 auto;
4    width: 725px;
5    position: relative;
6    text-align: center;
7}
8
9.item {
10    padding-top: 1px;
11    position: absolute;
12    width: 750px;
13    left: -430px;
14    top: 0;
15    color: #FFF;
16    font-size: 12px;
17    background-color: #a9c927;
18}
19
20.item:before {
21    width: 9999px;
22    height: 100%;
23    position: absolute;
24    right: 100%;
25    top: 0;
26    background-color: #a9c927;
27    content: '';
28}
29
30item:after {
31    width: 9999px;
32    height: 100%;
33    position: absolute;
34    right: 100%;
35    top: 0;
36    background-color: #a9c927;
37    content: '';
38    right: auto;
39    left: 100%;
40}

質問

上記のようなめんどくさい組織で使っているテンプレートを効率的に編集する方法はないのでしょうか？

s8_chu

2019/05/14 08:35 編集

すべての擬似要素に対してスタイルを適用するという方法ではその問題が解消出来ないのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

sassで使うCSS振り分ける、とかね。
って、失礼ですが、そんなガサいこと言ってる会社が、sassの導入を許可するわけがないので、cssだけである程度楽にできる対抗策を。

禁じ手で、あまりやらないほうがいいですが、
*とimportantを使う技です。

PCの元のCSSの後に、SP用を読み込み、下記を先頭に入れましょう。

CSS
1*::before,
2*::after {
3  content: initial !important;
4  display: none !important;
5}

ただし、あくまでこれは、あまりよろしくなく、禁じ手です。（管理や、CSSパフォーマンスに悪影響しかない）
そして、そのあとの擬似要素には必ず、!importantをいれなくてはならなくなります。

根本解決は、あなたがチームリーダーまでのし上がって、全部開発の仕方を、改善することでしょうね・・・。

投稿2019/05/14 08:38

miyabi_pudding

総合スコア9528

Nero1129

2019/05/14 08:53

前に居た部署でNodejsを入れてくれていたので、勝手にsassは使っているのですが、もともとのテンプレが子孫セレクタが3層近くで組まれており、ブラウザでは認識されなくなりめんどくさいんですよね。総称セレクタを使おうとしたのですが、使う意味が分かりませんと言われ、一瞬、キレそうになったのですが、一旦ここで質問することに落ち着いたしだいです。

miyabi_pudding

2019/05/14 08:59

そ、そら大変だ・・・。まともなデベロッパーがいなさそうですね。粘り強く説明して、納得してもらうか、納得得られなくとも、「この期間でやるなら、少しでも手間を減らすために必要なんです！このスケジュールで無理を押して依頼されているはそっちでしょ、だったら、現場のデベロッパーの意見に従ってください！」と道理でゴリ押すかするしかありませんね。と、このサイトの趣旨から逸脱する回答やコメント失礼しました。どうか、うまくやれることを祈っております・・・。

Nero1129

2019/05/16 03:55

一応、コーディングがメインの部署なので、見た目ができてしまえばいいみたいな感じです。そのくせ、謎の固定概念があるので少々困りました。納期3日前に今まで説明されてないことを急に言われ、対応に困りました。一応、sassで適応されない部分は自分で書き直して適用できたので、頑張ってみます。どのみち、個々で疑似要素を消すのも、両方ともメディアクエリ適応させるのも労力として変わらないので、メディアクエリの選択肢を選びました。声援ありがとうございます。

行動規範の内容に同意します