[1]佈局類 [2]盒模型 [3]文本類 [4]修飾類 [5]stylelint ...
前面的話
本文將按照佈局類屬性、盒模型屬性、文本類屬性、修飾類屬性這四個分類，對CSS常用屬性進行重新排列，並最終設置為一份stylelintrc文件
佈局類
1、定位
position z-index top bottom left right
2、浮動
float clear
3、多列佈局
columns columns-width columns-count column-rule column-fill column-span column-gap
4、柵格佈局
// 顯示網格 display grid grid-template-rows grid-template-columns grid-column-gap grid-row-gap grid-gap // 網格線 grid-row-start grid-row-end grid-row grid-column-start grid-column-end grid-column grid-area // 隱式網格 grid-auto-rows grid-auto-columns grid-auto-flow grid-template-rows grid-template-columns grid-template-areas grid-template //對齊 justify-items justify-self align-items align-self align-content
盒模型
1、彈性盒模型
// 彈性容器 display flex-direction flex-wrap flex-flow justify-content align-items align-content
// 彈性項目 flex flex-basis flex-grow flex-shrink align-self order
2、表格模型
table-layout empty-cells caption-side border-collapse border-spacing
3、列表模型
list-style
4、盒子尺寸
box-sizing display width height padding margin border border-radius outline
5、盒子顯示
overflow
clip
resize
visibility
文本類
1、文本樣式
font line-height text-align
vertical-allign text-indent text-transform text-overflow text-decoration text-shadow
text-justify
text-emphasis white-space letter-spacing word-spacing word-wrap word-break
2、排版模式
writing-mode text-combine-upright unicode-bidi text-orientation direction
修飾類
1、顏色
color background isolation clip-path mask filter box-shadow opacity
cursor
2、變形
transform transform-style transform-origin perspective perspective-origin backface-visibility
3、動畫
transition
animation
will-change
stylelint
{ "extends": "stylelint-config-standard", "plugins": [ "stylelint-order" ], "rules": { "order/order": [ "declarations", "custom-properties", "dollar-variables", "rules", "at-rules" ], "order/properties-order": [ "position", "z-index", "top", "bottom", "right", "left", "float", "clear", "columns", "columns-width", "columns-count", "column-rule", "column-rule-width", "column-rule-style", "column-rule-color", "column-fill", "column-span", "column-gap", "display", "grid", "grid-template-rows", "grid-template-columns", "grid-template-areas", "grid-auto-rows", "grid-auto-columns", "grid-auto-flow", "grid-column-gap", "grid-row-gap", "grid-template", "grid-template-rows", "grid-template-columns", "grid-template-areas", "grid-gap", "grid-row-gap", "grid-column-gap", "grid-area", "grid-row-start", "grid-row-end", "grid-column-start", "grid-column-end", "grid-column", "grid-column-start", "grid-column-end", "grid-row", "grid-row-start", "grid-row-end", "flex", "flex-grow", "flex-shrink", "flex-basis", "flex-flow", "flex-direction", "flex-wrap", "justify-content", "align-content", "align-items", "align-self", "order", "table-layout", "empty-cells", "caption-side", "border-collapse", "border-spacing", "list-style", "list-style-type", "list-style-position", "list-style-image", "ruby-align", "ruby-merge", "ruby-position", "box-sizing", "width", "min-width", "max-width", "height", "min-height", "max-height", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "border", "border-width", "border-top-width", "border-right-width", "border-bottom-width", "border-left-width", "border-style", "border-top-style", "border-right-style", "border-bottom-style", "border-left-style", "border-color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "border-image", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-top", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "border-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius", "border-top-left-radius", "outline", "outline-width", "outline-color", "outline-style", "outline-offset", "overflow", "overflow-x", "overflow-y", "resize", "visibility", "font", "font-style", "font-variant", "font-weight", "font-stretch", "font-size", "font-family", "font-synthesis", "font-size-adjust", "font-kerning", "line-height", "text-align", "text-align-last", "vertical-align", "text-overflow", "text-justify", "text-transform", "text-indent", "text-emphasis", "text-emphasis-style", "text-emphasis-color", "text-emphasis-position", "text-decoration", "text-decoration-color", "text-decoration-style", "text-decoration-line", "text-underline-position", "text-shadow", "white-space", "overflow-wrap", "word-wrap", "word-break", "line-break", "hyphens", "letter-spacing", "word-spacing", "quotes", "tab-size", "orphans", "writing-mode", "text-combine-upright", "unicode-bidi", "text-orientation", "direction", "text-rendering", "font-feature-settings", "font-language-override", "image-rendering", "image-orientation", "image-resolution", "shape-image-threshold", "shape-outside", "shape-margin", "color", "background", "background-image", "background-position", "background-size", "background-repeat", "background-origin", "background-clip", "background-attachment", "background-color", "background-blend-mode", "isolation", "clip-path", "mask", "mask-image", "mask-mode", "mask-position", "mask-size", "mask-repeat", "mask-origin", "mask-clip", "mask-composite", "mask-type", "filter", "box-shadow", "opacity", "transform-style", "transform", "transform-box", "transform-origin", "perspective", "perspective-origin", "backface-visibility", "transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay", "animation", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-fill-mode", "animation-play-state", "scroll-behavior", "scroll-snap-type", "scroll-snap-destination", "scroll-snap-coordinate", "cursor", "touch-action", "caret-color", "ime-mode", "object-fit", "object-position", "content", "counter-reset", "counter-increment", "will-change", "pointer-events", "all", "page-break-before", "page-break-after", "page-break-inside", "widows" ], } }
