Firefox推奨で個人的に理解したCSSの書き方_CSS/HTML

最近の仕事で、私は多くの問題に遭遇しました。そのうちの 1 つは、フロントエンド ワーカーの考えを反映する CSS の記述順序です。この記事を見た人は、思い当たる属性を書くのをやめてください。

まず、Firefox が推奨する書き込み順序を見てみましょう
* mozilla.org Base Styles
* fantasai によって維持されています
* (マークアップ ガイドで定義されているクラス -http:// mozilla.org /contribute/writing/markup)
*/
/* 推奨順序:
//属性の表示
* 表示
* リストスタイル
* 位置
* float
* clear
//自己属性
* 幅
* 高さ
* マージン
* パディング
* ボーダー
* 背景
//テキスト属性
* カラー
* フォント
* テキスト装飾
* テキスト整列
* 垂直方向整列
* ホワイトスペース
* その他のテキスト
* コンテンツ
*
*/
上記のおすすめ順からもわかるように、非常に整理されています。上記で推奨されている順序には、上、右、下、左などの詳細な属性は含まれていません。これがパフォーマンスに影響を与えるのではないかと疑問に思う人もいるかもしれませんが、申し訳ありませんが、わかりません。どちらでも構いませんが、物事を組織的に行うことが正しい方法だと思います（もっと良い方法があるかもしれません）。

私の理解:
1. 表示属性: display||visibility||list-style(list-style-type, list-style-image, list-style-position)||overflow
2. 位置決めとフローティング属性:position||top||right||bottom||left||float||clear
3. ボックス モデル: width||height||margin||padding||border
4. 背景: 背景 (background-image、background-position、background-repeat、background-attachment)
5. テキスト属性: font-style||font-variant||font-weight||font-size | |font-family||color
6. テキスト属性: text-indent||text-align||vertical-align||letter-spacing||text-transform||text-decoration| text-shadow
7. その他

「あなたがこの順序を使う​​かどうかに関係なく、私はとにかくそれを使います。」修正は大歓迎です