Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{
	/* 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: ;
}
@Martin-Pitt

This comment has been minimized.

Copy link
Owner Author

commented Jan 22, 2019

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.

@Martin-Pitt

This comment has been minimized.

Copy link
Owner Author

commented May 9, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.