Skip to content

Instantly share code, notes, and snippets.

@jamesfinley
Created February 22, 2023 12:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesfinley/3ab986f70e440b598704452bfee6ef86 to your computer and use it in GitHub Desktop.
Save jamesfinley/3ab986f70e440b598704452bfee6ef86 to your computer and use it in GitHub Desktop.
A Stylelint for ordering your properties and keeping things clean.
/* You'll need the following packages: stylelint, stylelint-config-standard, stylelint-order */
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"length-zero-no-unit": [true, {"ignore": ["custom-properties"]}],
"property-no-vendor-prefix": null,
"custom-property-pattern": null,
"selector-class-pattern": null,
"selector-id-pattern": null,
"at-rule-no-unknown": null,
"no-descending-specificity": null,
"order/properties-order": [
[
{
"groupName": "display",
"properties": [
"content",
"appearance",
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"flex",
"flex-direction",
"flex-basis",
"flex-flow",
"flex-grow",
"flex-shrink",
"flex-wrap",
"align-content",
"align-items",
"justify-content",
"justify-items"
]
},
{
"groupName": "grid",
"properties": [
"grid",
"grid-area",
"grid-template",
"grid-template-areas",
"grid-template-rows",
"grid-template-columns",
"grid-row",
"grid-row-start",
"grid-row-end",
"grid-column",
"grid-column-start",
"grid-column-end",
"grid-auto-rows",
"grid-auto-columns",
"grid-auto-flow",
"grid-gap",
"grid-row-gap",
"grid-column-gap",
"gap"
]
},
{
"groupName": "dimensions",
"properties": [
"width",
"max-width",
"min-width",
"height",
"max-height",
"min-height"
]
},
{
"groupName": "margin and padding",
"properties": [
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
]
},
{
"groupName": "border and background",
"properties": [
"box-sizing",
"border",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-width",
"border-radius",
"outline",
"box-shadow",
"background",
"background-color",
"background-image"
]
},
{
"groupName": "font",
"properties": [
"font",
"font-family",
"font-size",
"font-style",
"font-weight",
"line-height",
"color",
"text-decoration",
"font-smoothing"
]
}
],
{
"unspecified": "bottom"
}
]
}
}
@Enkratia
Copy link

What about margin-inline, margin-block etc?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment