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

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