stylelint配置样式自动排序

支持文件格式： css/scss/less

排序方式：按类型分组排序

  • 著名的Web前端专家Andy Ford推荐过一种按照类型分组排序的方式，他把CSS属性分为7大类：显示与浮动（Diplay&Flow）、定位（Positioning）、尺寸（Dimensions）、边框相关属性（Margins、Padding、Borders、Outline）、字体样式（Typographic Styles）、背景（Backgrounds）、其他样式（Opacity、Cursors、Generated Content）
  • 这种按照样式类型分组排列的方式不仅把功能相似的属性归类在一起，并且按照样式功能的重要性从上到下进行了排列。可以把影响元素页面布局的样式（如float、margin、padding、height、width等）排到前面，而把不影响布局的样式（如background、color、font等）放到后面。这种主次分明的排列方式，极大地提高了代码的可维护性

配置

1. 需先配置stylelint

（已配置朋友的跳过）博主姊妹篇：需先配置stylelint ： stylelint的配置

2. 安装

npm install stylelint-order stylelint-config-idiomatic-order --save-dev

3. 配置 stylelint.config.js：在原有的基础上，增加以下2项

  1. {
  2.   plugins: ['stylelint-order'], 
  3.   extends: ['stylelint-config-idiomatic-order'],
  4. }

排序顺序声明：

将相关的属性组合在一起，并且将对结构来说比较重要的属性（如定位或者盒模型） 放在前面，先于排版、背景及颜色等属性。
例如

  1. .selector {
  2.     /* Positioning */
  3.     position: absolute;
  4.     z-index: 10;
  5.     top: 0;
  6.     right: 0;
  7.     bottom: 0;
  8.     left: 0;
  10.     /* Display & Box Model */
  11.     display: inline-block;
  12.     overflow: hidden;
  13.     box-sizing: border-box;
  14.     width: 100px;
  15.     height: 100px;
  16.     padding: 10px;
  17.     border: 10px solid #333;
  18.     margin: 10px;
  20.     /* Other */
  21.     background: #000;
  22.     color: #fff;
  23.     font-family: sans-serif;
  24.     font-size: 16px;
  25.     text-align: right;
  26. }

（原创整理，有疑问或错误可以留言。如果有用，谢谢点赞~）