前面的话
本文将按照布局类属性、盒模型属性、文本类属性、修饰类属性这四个分类,对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", "left", "right", "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-