Cheatsheet of MOD-CSS

(with all CSS properties for printing)

Only FLEXGRID properties use :mod attribute.
Use :box for any others.

animation
  • animation 
    an
  • animation-delay 
    an.de
  • animation-direction 
    an.di
  • animation-duration 
    an.du
  • animation-fill-mode 
    an.fm
  • animation-iteration-count 
    an.ic
  • animation-name 
    an.nm
  • animation-play-state 
    an.ps
  • animation-timing-function 
    an.tf
background
  • background
    bg
  • background-color
    bg.co
  • background-image
    bg.im
  • background-origin
    bg.or
  • background-position
    bg.po
  • background-repeat
    bg.re
  • background-size
    bg.sz
  • background-position-x
    bg.px
  • background-position-y
    bg.py
  • mix-blend-mode
    mbm
border
  • border
    bd
  • border-bottom
    bd.bt
  • border-bottom-color
    bd.bc
  • border-bottom-left-radius
    br.blf
  • border-bottom-right-radius
    br.brg
  • border-bottom-style
    bd.bs
  • border-bottom-width
    bd.bw
  • border-color
    bd.co
  • border-left
    bd.lf
  • border-left-color
    bd.lc
  • border-left-style
    bd.ls
  • border-left-width
    bd.lw
  • border-radius
    br
  • border-right
    bd.rg
  • border-right-color
    bd.rc
  • border-right-style
    bd.rs
  • border-right-width
    bd.rw
  • border-style
    bd.st
  • border-top
    bd.tp
  • border-top-color
    bd.tc
  • border-top-left-radius
    br.tlf
  • border-top-right-radius
    br.trg
  • border-top-style
    bd.ts
  • border-top-width
    bd.tw
  • border-width
    bd.wd
box
  • height
    h
  • max-height
    mx.h
  • max-width
    mx.w
  • min-height
    mn.h
  • min-width
    mn.w
  • width
    w
  • margin
    m
  • margin-bottom
    m.bt
  • margin-left
    m.lf
  • margin-right
    m.rg
  • margin-top
    m.tp
  • padding
    p
  • padding-bottom
    p.bt
  • padding-left
    p.lf
  • padding-right
    p.rg
  • padding-top
    p.tp
  • box-sizing
    bx.sz
  • box-shadow
    bx.sh
  • outline
    ot
  • outline-color
    ot.co
  • outline-offset
    ot.of
  • outline-style
    ot.st
  • outline-width
    ot.wd
  • appearance
    ape
  • cursor
    cu
  • visibility
    v
  • z-index
    zx
  • resize
    rz
  • backface-visibility
    bcv
  • backdrop-filter
    bcf
breakpoints
  • Extra small < 575.98px
    xs
  • Small ≥ 576px
    sm
  • Medium ≥ 768px
    md
  • Large ≥ 992px
    lg
  • Extra Large ≥ 1200px
    xl
  • Very Extra ≥ 1400px
    xxl
flex
  • flex
    fl
  • flex-basis
    fl.bs
  • flex-direction
    fl.di
  • flex-flow
    fl.fw
  • flex-grow
    fl.gr
  • flex-shrink
    fl.sh
  • flex-wrap
    fl.wp
  • order
    or
  • gap
    gp
flexgrid
  • container
    container
  • container
    container$
  • row
    row
  • row
    row$
  • column
    col
  • column
    col$
font
  • font
    fo
  • font-family
    fo.fa
  • font-size
    fo.sz
  • font-stretch
    fo.str
  • font-style
    fo.sy
  • font-variant
    fo.va
  • font-weight
    fo.wg
layout
  • align-content
    al.co
  • align-items
    al.it
  • align-self
    al.se
  • justify-content
    ju.co
  • justify-items
    ju.it
  • justify-self
    ju.se
  • place-content
    pl.co
  • place-items
    pl.it
  • place-self
    pl.se
  • position
    po
  • top
    tp
  • right
    rg
  • bottom
    bt
  • left
    lf
  • float
    float
  • clear
    clear
  • vertical-align
    val
  • z-index
    zx
  • object-fit
    ob.fit
  • object-position
    ob.pos
  • columns
    cols
list
  • list-style
    ls
  • list-style-image
    ls.im
  • list-style-position
    ls.po
  • list-style-type
    ls.ty
Pseudos-classes
  • :active
    active
  • :checked
    checked
  • :default
    default
  • :defined
    defined
  • :disabled
    disabled
  • :empty
    empty
  • :enabled
    enabled
  • :first
    first
  • :first-child
    first-child
  • :first-of-type
    first-of-type
  • :focus
    focus
  • :focus-within
    focus-within
  • :host
    host
  • :host()
    host()
  • :hover
    hover
  • :indeterminate
    indeterminate
  • :in-range
    in-range
  • :invalid
    invalid
  • :lang()
    lang()
  • :last-child
    last-child
  • :last-of-type
    last-of-type
  • :left
    left
  • :link
    link
  • :not()
    not()
  • :nth-child()
    nth-child()
  • :nth-last-child()
    nth-last-child()
  • :nth-last-of-type()
    nth-last-of-type()
  • :nth-of-type()
    nth-of-type()
  • :only-child
    only-child
  • :only-of-type
    only-of-type
  • :optional
    optional
  • :out-of-range
    out-of-range
  • :past Experimental
    past Experimental
  • :read-only
    read-only
  • :read-write
    read-write
  • :required
    required
  • :right
    right
  • :root
    root
  • :scope
    scope
  • :target
    target
  • :valid
    valid
  • :visited
    visited
  • :where()
    where()
  • and many more
    ...
Pseudos-Elements
  • ::before
    before
  • ::after
    after
table
  • border-collapse
    bd.cp
  • border-spacing
    bd.sp
  • caption-side
    caps
  • empty-cells
    epc
  • table-layout
    tbl
transform
  • transform
    trf
  • transform-origin
    trf.or
  • transform-style
    trf.s
  • transform-box
    trf.bx
transition
  • transition
    trn
  • transition-delay
    trn.de
  • transition-duration
    trn.du
  • transition-property
    trn.pr
  • transition-timing-function
    trn.tf
Typography
  • color
    co
  • list-style
    ls
  • list-style-image
    ls.im
  • list-style-position
    ls.po
  • list-style-type
    ls.ty
  • direction
    dir
  • tab-size
    tbs
  • text-align
    tx.al
  • text-decoration
    tx.de
  • text-indent
    tx.in
  • text-justify
    tx.ju
  • text-overflow
    tx.ov
  • text-shadow
    tx.sh
  • text-transform
    tx.tr
  • text-orientation
    tx.or
  • text-underline-offset
    tx.uo
  • text-underline-position
    tx.up
  • line-height
    ln.h
  • line-break
    ln.b
  • letter-spacing
    lts
  • white-space
    wsp
  • word-spacing
    wd.sp
  • word-break
    wd.br
  • word-wrap
    wd.wp
  • break-before
    brk.be
  • break-after
    brk.af
  • break-inside
    brk.in
  • writing-mode
    wm