いつも css を書く際プロパティ順を気にせず書いているのですが、パフォーマンス的に css プロパティの書く順で適したものはあるのでしょうか。知見のある方、ご教示いただけますと幸いです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

回答3件
0
競合した内容でなければ人が認識できるほどの違いはないと思います
投稿2017/06/17 08:25
総合スコア117451
0
ベストアンサー
これから書く内容は、「理論上は」という但し書きが付きます。
リフローとリペイント
レンダリングエンジンによって呼称が変わりますが、ブラウザにはリフロー、リペイントの機能が備わっており、リフロー回数/リペイント回数が少ない方がパフォーマンスの向上が期待できます。
- リフロー … レイアウトを再構築する事。「レイアウト(Layout)」と呼ぶ実装もある。
- リペイント … 再描画する事。「ペインティング(Painting)」と呼ぶ実装もある。
これらの概念はJavaScript + DOMで説明されることが多いですが、CSS にも関係しています。
レイアウトに影響するプロパティを先に書く
例えば、display: none
が存在した場合、color: black
や background-color: white
はWebページへの描画に影響を与えず、無用の長物と化します。
CSS
1.foo { 2 display: none; 3 color: black; /* 前述のdisplay: noneによって機能しなくなる */ 4 background-color: white; /* 前述のdisplay: noneによって機能しなくなる */ 5}
そういう意味では display
プロパティを先に書いておく方がパフォーマンス上都合が良いといえるかもしれません。
ブラウザはあるセレクタ上に存在するプロパティ全てを解析し、有効なプロパティだけを拾い、レイアウト/ペイントする事を試みるはずです。
仮にプロパティを1文ずつ拾い、後続の有効なプロパティを1文ずつ拾う実装があった場合、先に後続のプロパティに影響を与えるプロパティ(display
)を書く方がわずかながらパフォーマンスが向上する事が期待できます。
逆に全てのプロパティを拾った後に有効なプロパティだけをリストアップする実装であれば、プロパティの順序はパフォーマンスに影響を与えません。
後はリフロー/リペイントのタイミングに依存します。
Re: theinternet さん
投稿2017/08/01 12:03
総合スコア18194
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。