Layout and Theme CSS Properties List

Layout CSS Properties

The properties that should be included in the _layout.scss file

• Styles for the layout of the component
• Abstract values - everything that is set to initial, inherit, currentColor, none

// Content
content


// Layout
margin
padding
width
min-width
max-width
height
min-height
max-height
border-width
border-radius
border-collapse
border-spacing
box-sizing
outline


// Font
font-size
font-family
line-height
font-weight
font-style
font-variant


// Text
text-align
white-space
text-overflow
text-decoration
text-transform
text-indent
text-justify
text-shadow
letter-spacing
word-break
word-spacing
word-wrap
writing-mode
vertical-align


// List
list-style-type
list-style-position


// Visibility
visibility


// Display
display
float

// Display Table
table-layout
empty-cells

// Display Flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
flex-grow
flex-shrink
flex-basis
align-self

// Display Grid
grid-template-columns
grid-template-rows
grid-template-areas
grid-area
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column-gap
grid-row-gap
justify-items
justify-self
grid-auto-columns
grid-auto-rows
grid-auto-flow


// Position 
position
top
right
bottom
left
transform


// Others
overflow
z-index
cursor
transition
animation
object-fit
object-position
background-clip
pointer-events
columns
direction

Theme CSS Properties

The properties that should be included in the _theme.scss file

• Styles that add color
• Specific values

// Colors
background-color
color
border-color
box-shadow
text-decoration-color
outline-color


// Opacity
opacity

PostCSS Sorting

• The VSCode plugin "PostCSS Sorting" makes is possible to reorder the CSS properties by the order specified above.

https://github.com/hudochenkov/postcss-sorting

• To set it up, install it from VSCode Extensions tab, and add the following property to settings.json:

    "postcssSorting.config": {
      "order": [
        "custom-properties",
      ],
      "properties-order": [
            "content",
            "margin",
            "padding",
            "width",
            "min-width",
            "max-width",
            "height",
            "min-height",
            "max-height",
            "border-width",
            "border-radius",
            "border-collapse",
            "border-spacing",
            "border-style",
            "box-sizing",
            "outline",
            "font-size",
            "font-family",
            "line-height",
            "font-weight",
            "font-style",
            "font-variant",
            "text-align",
            "white-space",
            "text-overflow",
            "text-decoration",
            "text-transform",
            "text-indent",
            "text-justify",
            "text-shadow",
            "letter-spacing",
            "word-break",
            "word-spacing",
            "word-wrap",
            "writing-mode",
            "vertical-align",
            "list-style-type",
            "list-style-position",
            "visibility",
            "display",
            "float",
            "table-layout",
            "empty-cells",
            "flex-direction",
            "flex-wrap",
            "flex-flow",
            "justify-content",
            "align-items",
            "align-content",
            "order",
            "flex-grow",
            "flex-shrink",
            "flex-basis",
            "align-self",
            "grid-template-columns",
            "grid-template-rows",
            "grid-template-areas",
            "grid-area",
            "grid-column-start",
            "grid-column-end",
            "grid-row-start",
            "grid-row-end",
            "grid-column-gap",
            "grid-row-gap",
            "justify-items",
            "justify-self",
            "grid-auto-columns",
            "grid-auto-rows",
            "grid-auto-flow",
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "transform",
            "overflow",
            "z-index",
            "cursor",
            "transition",
            "animation",
            "object-fit",
            "object-position",
            "background-clip",
            "pointer-events",
            "columns",
            "direction",
            "background-color",
            "color",
            "border-color",
            "box-shadow",
            "text-decoration-color",
            "outline-color",
            "opacity",
          ]
        }