CSS プロパティの記述順序 (個人的)

このページは CSS プロパティの記述順序 (個人的な好み) をまとめる予定のページです。

前提

• 使用頻度が低いものは省いています。
  • 例: float (flex があるため今はほとんど使っていない)
  • 例: grid (IE11が動作対象内で、Polyfill等も導入しないため2019年時点ではまだ使っていない)
  • 例: border-top-width 等の個別プロパティ (border-top 等ショートハンドを使うため。font-* や background-* 等のプロパティは煩雑さを減らすために使用することがある)
• 個人的な癖での順序のため一貫性が無い部分があります。
• おおまかな順序のためその時々によって若干違うことがあります。

記述順序

1. content
2. display
3. box-sizing
4. flex
   1. flex
   2. flex-direction
   3. flex-wrap
   4. justify-content
   5. align-items
5. position
   1. position
   2. top
   3. right
   4. bottom
   5. left
   6. z-index
6. width
   1. width
   2. max-width
   3. min-width
7. height
   1. height
   2. max-height
   3. min-height
8. overflow
9. margin
   1. margin-top
   2. margin-right
   3. margin-bottom
   4. margin-left
10. padding
    1. padding-top
    2. padding-right
    3. padding-bottom
    4. padding-left
11. border
    1. border-top
    2. border-right
    3. border-bottom
    4. border-left
    5. border-radius
12. box-shadow
13. color
14. background (background-image, background-color, background-repeat, background-position はショートハンドで記載することが多い)
    1. background-size
15. font
    1. font-size
    2. font-family
    3. font-weight
    4. line-height
16. text-*, etc
    1. text-align
    2. vertical-align
    3. text-decoration
    4. letter-spacing
    5. white-space
17. opacity
18. transform
19. transition
20. animation
21. cursor
22. pointer-events

例

body {
    box-sizing: border-box;
    max-width: 980px;
    margin: auto;
    padding: 15px;
    font-size: 1.4rem;
    font-family: sans-serif;
}

.drawer {
    box-sizing: border-box;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px;
    max-width: 100%;
    max-height: 100vh;
    overflow: auto;
    padding: 15px;
    color: white;
    background: #222;

    transform: translateX(300px);
    transition: 0.2s transform;
    -webkit-overflow-scrolling: touch;
}