CSSのプロパティ記述順まとめ


CSSプロパティの記述順については、厳密に定義されたルールは存在しないが、視覚的な要素順で書いた方が整理しやすく、レビュー側にとってもわかりやすいということを学びました。
プロパティは無数に存在するため、正確性を保つのは難しいというデメリットはあるものの、ある程度のグルーピングは可能であると思います。

<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/f356c7d5-d580-d127-7fb0-7fa31803fc25.png">

【要素分解して考える（大→小)】
1. 要素を表示するのか、しないのか。(<font color="Red">**display** etc...</font>)
2. 要素をどこに配置するのか。(<font color="Red">**position**, **float** etc...</font>)
3. ブロックレベルで要素をどう見せるか。(<font color="Red">**width**, **height** etc...</font>)
4. インラインレベルで要素をどう見せるか。(<font color="Red">**font**, **text-align** etc...</font>)



```css:style.css

/* 大まかに並べると、
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 *
*/
```

##1. 要素表示
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/60f9e26f-82f1-fdf7-78c5-c82e356e37c8.png">

- [display](https://developer.mozilla.org/ja/docs/Web/CSS/display)
- [overflow](https://developer.mozilla.org/ja/docs/Web/CSS/overflow)
- [visibility](https://developer.mozilla.org/ja/docs/Web/CSS/visibility)
- [clip-path](https://developer.mozilla.org/ja/docs/Web/CSS/clip-path)
- [list-style](https://developer.mozilla.org/ja/docs/Web/CSS/list-style)

##2. 要素位置
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/644fe3b6-b991-311b-f8ac-6c83b4b1c856.png">

- [top](https://developer.mozilla.org/ja/docs/Web/CSS/top)
- [right](https://developer.mozilla.org/ja/docs/Web/CSS/right)
- [bottom](https://developer.mozilla.org/ja/docs/Web/CSS/bottom)
- [left](https://developer.mozilla.org/ja/docs/Web/CSS/left)
- [z-index](https://developer.mozilla.org/ja/docs/Web/CSS/z-index)
- [position](https://developer.mozilla.org/ja/docs/Web/CSS/position)
- [float](https://developer.mozilla.org/ja/docs/Web/CSS/float)
- [clear](https://developer.mozilla.org/ja/docs/Web/CSS/clear)

##3. ブロック要素設定
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/6421d804-295c-b36e-6b6c-b31673ae8112.png">

####幅・高さ

- [width](https://developer.mozilla.org/ja/docs/Web/CSS/width)
 - [min-width](https://developer.mozilla.org/ja/docs/Web/CSS/min-width)
 - [max-width](https://developer.mozilla.org/ja/docs/Web/CSS/max-width)
- [height](https://developer.mozilla.org/ja/docs/Web/CSS/height)
 - [min-height](https://developer.mozilla.org/ja/docs/Web/CSS/min-height)
 - [max-height](https://developer.mozilla.org/ja/docs/Web/CSS/max-height)

####マージン・パディング

- [margin](https://developer.mozilla.org/ja/docs/Web/CSS/margin)
    - [margin-top](https://developer.mozilla.org/ja/docs/Web/CSS/margin-top)
    - [margin-right](https://developer.mozilla.org/ja/docs/Web/CSS/margin-right)
    - [margin-bottom](https://developer.mozilla.org/ja/docs/Web/CSS/margin-bottom)
    - [margin-left](https://developer.mozilla.org/ja/docs/Web/CSS/margin-left)
- [padding](https://developer.mozilla.org/ja/docs/Web/CSS/padding)
    - [padding-top](https://developer.mozilla.org/ja/docs/Web/CSS/padding-top)
    - [padding-right](https://developer.mozilla.org/ja/docs/Web/CSS/padding-right)
    - [padding-bottom](https://developer.mozilla.org/ja/docs/Web/CSS/padding-bottom)
    - [padding-left](https://developer.mozilla.org/ja/docs/Web/CSS/padding-left)

####背景
- [background](https://developer.mozilla.org/ja/docs/Web/CSS/background)
 - [background-image](https://developer.mozilla.org/ja/docs/Web/CSS/background-image)
 - [background-size](https://developer.mozilla.org/ja/docs/Web/CSS/background-size)
 - [background-repeat](https://developer.mozilla.org/ja/docs/Web/CSS/background-repeat)
 - [background-color](https://developer.mozilla.org/ja/docs/Web/CSS/background-color)

####境界線
- [border](https://developer.mozilla.org/ja/docs/Web/CSS/border)
    - [border-width](https://developer.mozilla.org/ja/docs/Web/CSS/border-width)
    - [border-style](https://developer.mozilla.org/ja/docs/Web/CSS/border-style)
    - [border-color](https://developer.mozilla.org/ja/docs/Web/CSS/border-color)
    - [border-image](https://developer.mozilla.org/ja/docs/Web/CSS/border-image)
    - [border-radius](https://developer.mozilla.org/ja/docs/Web/CSS/border-radius)
 
##4. インライン要素設定
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623708/a90e1b1b-03b7-cd33-e8f4-9bcd11e980f8.png">


####テキスト・フォント

- [font](https://developer.mozilla.org/ja/docs/Web/CSS/font)
 - [font-family](https://developer.mozilla.org/ja/docs/Web/CSS/font-family)
 - [font-variant](https://developer.mozilla.org/ja/docs/Web/CSS/font-variant)
 - [font-style](https://developer.mozilla.org/ja/docs/Web/CSS/font-style)
 - [font-weight](https://developer.mozilla.org/ja/docs/Web/CSS/font-weight)
 - [font-size](https://developer.mozilla.org/ja/docs/Web/CSS/font-size)
- [text-decoration](https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration)
- [text-align](https://developer.mozilla.org/ja/docs/Web/CSS/text-align)
- [text-transform](https://developer.mozilla.org/ja/docs/Web/CSS/text-transform)

##5.その他

####表
- [table-layout](https://developer.mozilla.org/ja/docs/Web/CSS/table-layout)
- [vertical-align](https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align)

####アニメーション
- [animation](https://developer.mozilla.org/ja/docs/Web/CSS/animation)
- [transition](https://developer.mozilla.org/ja/docs/Web/CSS/transition)