CSS样式书写顺序

使用stylelint格式化之后的css样式顺序，记录一下，后续遇到其他的再添加

.box{
      position: relative;
      inset: 2px 1px 1px;
      z-index: 1;
      box-sizing: border-box;

      display: grid;
      flex: 1;
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 5fr 1fr;
      grid-row: 1/4;
      grid-column: 1/3;
      column-gap: 5px;
      place-content: center;
      place-items: center;
      align-items: center;
      align-self: start;
      justify-content: center;

      width: 10px;
      height: 50px;
      padding: 10px;
      margin: 10px;
      overflow: hidden;

      font-size: 15px;
      font-weight: bold;
      line-height: 30px;
      color: #ccc;
      text-align: center;
      text-overflow: clip;
      word-break: break-all;
      white-space: nowrap;
      content: '';

      background-color: #fff;
      border: 1px solid #000;
      border-radius: 10px;
      box-shadow: inset;
      transform: translateX(100%);


      &::before {
        grid-column: 1/3;
        content: '';
      }

      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

}