Skip to content

Instantly share code, notes, and snippets.

@joshuapekera
Last active August 30, 2022 10:23
Show Gist options
  • Save joshuapekera/4582549 to your computer and use it in GitHub Desktop.
Save joshuapekera/4582549 to your computer and use it in GitHub Desktop.
The Recess property order for CSS and browser prefixed properties.

Browser Prefix Order

.vendorPrefixes {
	-webkit-:;
 	-khtml-:;
	-epub-:;
	-moz-:;
	-ms-:;
	-o-:;
}

Recess Property Order

// Recess CSS Property Order
.element {
	position:;
	top:;
	bottom:;
	left:;
	z-index:;
	display:;
	float:;
	width:;
	height:;
	max-width:;
	max-height:;
	min-width:;
	min-height:;
	padding:;
	padding-top:;
	padding-right:;
	padding-bottom:;
	padding-left:;
	margin:;
	margin-top:;
	margin-right:;
	margin-bottom:;
	margin-left:;
	margin-collapse:;
	margin-top-collapse:;
	margin-right-collapse:;
	margin-bottom-collapse:;
	margin-left-collapse:;
	overflow:;
	overflow-x:;
	overflow-y:;
	clip:;
	clear:;
	font:;
	font-family:;
	font-size:;
	font-smoothing:;
	font-style:;
	font-weight:;
	hyphens:;
	src:;
	line-height:;
	letter-spacing:;
	word-spacing:;
	color:;
	text-align:;
	text-decoration:;
	text-indent:;
	text-overflow:;
	text-rendering:;
	text-size-adjust:;
	text-shadow:;
	text-transform:;
	word-break:;
	word-wrap:;
	white-space:;
	vertical-align:;
	list-style:;
	list-style-type:;
	list-style-position:;
	list-style-image:;
	pointer-events:;
	cursor:;
	background:;
	background-attachment:;
	background-color:;
	background-image:;
	background-position:;
	background-repeat:;
	background-size:;
	border:;
	border-collapse:;
	border-top:;
	border-right:;
	border-bottom:;
	border-left:;
	border-color:;
	border-top-color:;
	border-right-color:;
	border-bottom-color:;
	border-left-color:;
	border-spacing:;
	border-style:;
	border-top-style:;
	border-right-style:;
	border-bottom-style:;
	border-left-style:;
	border-width:;
	border-top-width:;
	border-right-width:;
	border-bottom-width:;
	border-left-width:;
	border-radius:;
	border-top-right-radius:;
	border-bottom-right-radius:;
	border-bottom-left-radius:;
	border-top-left-radius:;
	border-radius-topright:;
	border-radius-bottomright:;
	border-radius-bottomleft:;
	border-radius-topleft:;
	content:;
	quotes:;
	outline:;
	outline-offset:;
	opacity:;
	filter:;
	visibility:;
	size:;
	zoom:;
	transform:;
	box-align:;
	box-flex:;
	box-orient:;
	box-pack:;
	box-shadow:;
	box-sizing:;
	table-layout:;
	animation:;
	animation-delay:;
	animation-duration:;
	animation-iteration-count:;
	animation-name:;
	animation-play-state:;
	animation-timing-function:;
	animation-fill-mode:;
	transition:;
	transition-delay:;
	transition-duration:;
	transition-property:;
	transition-timing-function:;
	background-clip:;
	backface-visibility:;
	resize:;
	appearance:;
	user-select:;
	interpolation-mode:;
	direction:;
	marks:;
	page:;
	set-link-source:;
	unicode-bidi:;
}
@IAMtheIAM
Copy link

I thing right: is missing from the list above.

@reussite
Copy link

Yes there is no "justify-content"
and "align-items" of flex box elements

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment