Css Convention Order

CssConvention

CSS Convention Order

float
position
top
right
bottom
left
width
height
line-height
display
  - if display: flex, flex related properties should follow immediately
vertical-align (if inline || inline-block)
margin
padding
box-sizing
border
border-radius
background
overflow
text-align
text-transform
color
font-size
font-weight
font-family
user-select
transition



`my-main-element`: names that have multiple words can be dash delimited or kebab case

`my-main-element__child`: names of nested elements can use the double underscore __ to denote child parent relationship to another class.

`my-main-element__child--left`:
`my-main-element--active`: names of elements that are a permutation can use the double dash -- to denote the permutation. This is a more rare use case but does come in handy.