{
/* 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: ;
}
Last active
December 10, 2020 14:44
-
-
Save Martin-Pitt/557a13b503df15eae9fee5fa54681cc5 to your computer and use it in GitHub Desktop.
CSS Concentric Styling Order
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
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
andtransition
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.