CSS Concentric Styling Order

concentric-styling-order.md

{
	/* Where the box is placed */
	position: ;
	z-index: ;
	float: ;
	place-self: ;
	justify-self: ;
	align-self: ;
	vertical-align: ;
	transform: ;
	
	/* Box model behaviour */
	display: ;
	object-*: ;
	box-sizing: ;
	grid-*: ;
	flex-*: ;
	align-*: ;
	justify-*: ;
	overflow: ;
	scroll-*: ;
	
	/* Box model shape */
	width: ;
	height: ;
	padding: ;
	border: ;
	margin: ;
	clip-path: ;
	mask: ;
	
	/* Decor */
	fill: ;
	stroke: ;
	background: ;
	backdrop-*: ;
	opacity: ;
	outline: ;
	box-shadow: ;
	
	/* Typography */
	color: ;
	font: ;
	font-*: ;
	text-*: ;
	word-*: ;
	letter-*: ;
	
	/* State */
	animation: ;
	transition: ;
	visibility: ;
	pointer-events: ;
	cursor: ;
}

Reviewing this list again it's interesting seeing what works or does not.

You might notice that the *-self properties are at the very top.

In practice, I do tend to break this list by grouping transform, opacity and transition together due to their practical usage in animation. So there may be more nuance for situations. This list is mostly ideal for a generic non-animated element.

min-width & min-height, max-width & max-height would follow after the width & height pair