CSSで同じプロパティを続けて指定するケースはあるでしょうか？
.hoge:after {
width: 20px;
width: 10px;
}
実際に確認できるプロパティはwidth height background-positionで、:beforeや:afterに対して指定されているようです。
基本的には後から指定したプロパティが優先されるので意味はないと思っているのですが、
これが単純に間違いなのか、あるいは何か効果があるのか判断しかねています。
よろしくお願いいたします。
仰るとおりCSSの仕様でいう「詳細度」と「ソースオーダー」に基づき後者のみが適用されます。２つの指定が影響し合うようなこともないのでwidth: 20px;は表示上意味がない指定だと言えます。
これが単純に間違いなのか、あるいは何か効果があるのか判断しかねています。
質問に記載の例では単純なミスのようにも見えますが、”同じプロパティを続けて指定するケース”については他に以下のようなものが考えられます。
.hoge{
width:100%;
width:100vw;
}
vw, vh, rem などの単位や display:flex; のようなCSS3対応ブラウザでなければ表示できないスタイル指定があります。
ブラウザは対応外のスタイル指定を（表示エラーとするのではなく）無視するため、上のように連ねて記述しておくと「先に vw で表示できるか試してみて、ダメだったら % で代用する（フォールバック）」といった効果が得られます。
※当然ながら質問に記載の例は両方とも px なのでこれが原因ではないでしょう。
CSS プリプロセッサ（Scss, Stylus など）に mixin という「一旦複数のプロパティ指定をまとめて定義して、何度も再利用できる機能」があります。
下の例は「myMixin() を使って position top width の指定を使いまわしたいが .bar だけ幅が異なるので個別に調整する」といった運用を想定したものです。
// プリプロセッサでの記述
@mixin myMixin {
position: relative;
top: 0;
width: 20px;
}
.foo {
@include myMixin();
}
.bar {
@include myMixin();
width: 10px; //ここでプロパティを上書きする
}
このとき、mixin に入っている width を除去することはできないので、.bar の方で更に width:10px; を指定することで上書きします。結果出力される CSS ファイルには一見不要に見える width:20px; が残ることになります。
/* 出力されたCSSファイル */
.foo {
position: relative;
top: 0;
width: 20px;
}
.bar {
position: relative;
top: 0;
width: 20px; /* 不要に見えるが、myMixin 由来なので除去できない */
width: 10px;
}
プリプロセッサを使う場合は表示結果が正しければ最終的に出力されるコードの形状よりも管理しやすさが重要視されるので、今回のような”同じプロパティへの上書き”が残りやすいと言えます。
質問内容では:after や width など特定のセレクタとプロパティで見受けられるとのことですから、ご覧になっているCSSファイルの制作者がプリプロセッサを用いた結果ではないかなーと推察しておりますがいかがでしょうか。
@blue32a
Questioner
@blue32a
Questioner