Style layout within a selector.

Background

Shorthand first, followed by color and then image properties based on their relationship to the box model.

• background – Avoid if Possible

• background-color

• background-image

• background-attachment

• background-repeat

• background-position

• background-origin

• background-size

• background-clip

• filter [Can I Use?]

Typography

Properties located in partials

• @font-face
• font-family
• font-size
• color

Font File

@font-face
    font – Avoid if Possible
    font-family
    font-weight
    font-style
    font-variant
    font-variant-ligatures

• font-feature-settings

Modifying font

• font-size
• line-height
• letter-spacing
• word-spacing
• color

Int support

• writing-mode
• unicode-bidi
• direction

Modifying behavior

• text-transform
• text-decoration
• text-align
• text-align-last
• vertical-align
• text-indent
• text-shadow
• word-break
• word-wrap
• text-overflow

Modifying punctuation

• quotes
• hanging-punctuation
• tab-size
• white-space

Modifying Lists

• list-style
• counter-increment
• counter-reset

Low Browser Support - Not Recommended

• orphans [Can I Use?]
• hyphens [Can I Use?]
• line-break
• text-combine-upright
• text-justify
• @font-feature-values
• font-kerning
• font-language-override
• font-size-adjust
• font-stretch
• font-synthesis
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-numeric
• font-variant-position
• text-orientation
• text-underline-position
• ime-mode

Display

Properties located in partials

• z-index

box-sizing

• display [when not flex]

• appearance

• box-decoration-break

• overflow

• overflow-x

• overflow-y

• overflow-wrap

• opacity

• visibility

• cursor

• resize

• page-break

Flex

Parent

• display [when flex]
• flex-flow
• justify-content
• align-items
• align-content

Child

• order
• flex
• align-self

Column

Not enough browser support to implement yet.

Table

• caption-side
• empty-cells
• table-layout

Float

• float
• @extend %clearfix

Don't use clear, use %clearfix

Position

• @extend %position-(type)
• +position(top, right, bottom, left) - initial = null
• @extend %position - 0, 0, 0, 0

Margin

• margin

Border

• box-shadow
• outline
• border
• border-radius
• border-collapse
• border-spacing

Height / Width

• max-height
• min-height
• height
• max-width
• min-width
• width

Padding

• padding

Transform

• transform
• perspective
• backface-visibility

Transitions

• transition

Animation

In it's own partial

::before
    @extend %content

::after
    @extend %content

• :hover
• :active