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;
}