# CSS Declaration Order
Related property declarations should be grouped together following the order:

* Box
* Border
* Background
* Text
* Other

Box includes any property that affects the display and position of the box such as `display`, `float`, `position`, `left`, `top`, `height`, `width` and so on. These are most important because they affect the flow of the rest of the document.

Border includes `border`, the oft-unused `border-image`, and `border-radius`.

Background includes any property that changes the background of an element such as `background`, `background-color`, `background-size` etc.

Text declarations include `font-family`, `font-size`, `text-transform`, `letter-spacing` and any other CSS properties that affect the display of the type.

Anything that doesn’t fall into any of the above categories gets added to the end.

```
.declaration-order {
    /* Box */
    display: block;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
    top: -1px;

    /* Border */
    border: 1px solid #333;
    border-radius: 10px;

    /* Background */
    background-color: #f5f5f5;

    /* Text */
    font-size: 12px;
    text-transform: uppercase;

    /* Other */
    animation: all 0.2s ease;
    opacity: 1;
}
```