属性声明顺序

相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。

  1. .declaration-order {
  2.     display: block;
  3.     float: right;
  5.     position: absolute;
  6.     top: 0;
  7.     right: 0;
  8.     bottom: 0;
  9.     left: 0;
  10.     z-index: 100;
  12.     border: 1px solid #e5e5e5;
  13.     border-radius: 3px;
  14.     width: 100px;
  15.     height: 100px;
  17.     font: normal 13px "Helvetica Neue", sans-serif;
  18.     line-height: 1.5;
  19.     text-align: center;
  21.     color: #333;
  22.     background-color: #f5f5f5;
  24.     opacity: 1;
  25. }
  1. // 下面是推荐的属性的顺序
  2. [
  3.     [
  4.         "display",
  5.         "visibility",
  6.         "float",
  7.         "clear",
  8.         "overflow",
  9.         "overflow-x",
  10.         "overflow-y",
  11.         "clip",
  12.         "zoom"
  13.     ],
  14.     [
  15.         "table-layout",
  16.         "empty-cells",
  17.         "caption-side",
  18.         "border-spacing",
  19.         "border-collapse",
  20.         "list-style",
  21.         "list-style-position",
  22.         "list-style-type",
  23.         "list-style-image"
  24.     ],
  25.     [
  26.         "-webkit-box-orient",
  27.         "-webkit-box-direction",
  28.         "-webkit-box-decoration-break",
  29.         "-webkit-box-pack",
  30.         "-webkit-box-align",
  31.         "-webkit-box-flex"
  32.     ],
  33.     [
  34.         "position",
  35.         "top",
  36.         "right",
  37.         "bottom",
  38.         "left",
  39.         "z-index"
  40.     ],
  41.     [
  42.         "margin",
  43.         "margin-top",
  44.         "margin-right",
  45.         "margin-bottom",
  46.         "margin-left",
  47.         "-webkit-box-sizing",
  48.         "-moz-box-sizing",
  49.         "box-sizing",
  50.         "border",
  51.         "border-width",
  52.         "border-style",
  53.         "border-color",
  54.         "border-top",
  55.         "border-top-width",
  56.         "border-top-style",
  57.         "border-top-color",
  58.         "border-right",
  59.         "border-right-width",
  60.         "border-right-style",
  61.         "border-right-color",
  62.         "border-bottom",
  63.         "border-bottom-width",
  64.         "border-bottom-style",
  65.         "border-bottom-color",
  66.         "border-left",
  67.         "border-left-width",
  68.         "border-left-style",
  69.         "border-left-color",
  70.         "-webkit-border-radius",
  71.         "-moz-border-radius",
  72.         "border-radius",
  73.         "-webkit-border-top-left-radius",
  74.         "-moz-border-radius-topleft",
  75.         "border-top-left-radius",
  76.         "-webkit-border-top-right-radius",
  77.         "-moz-border-radius-topright",
  78.         "border-top-right-radius",
  79.         "-webkit-border-bottom-right-radius",
  80.         "-moz-border-radius-bottomright",
  81.         "border-bottom-right-radius",
  82.         "-webkit-border-bottom-left-radius",
  83.         "-moz-border-radius-bottomleft",
  84.         "border-bottom-left-radius",
  85.         "-webkit-border-image",
  86.         "-moz-border-image",
  87.         "-o-border-image",
  88.         "border-image",
  89.         "-webkit-border-image-source",
  90.         "-moz-border-image-source",
  91.         "-o-border-image-source",
  92.         "border-image-source",
  93.         "-webkit-border-image-slice",
  94.         "-moz-border-image-slice",
  95.         "-o-border-image-slice",
  96.         "border-image-slice",
  97.         "-webkit-border-image-width",
  98.         "-moz-border-image-width",
  99.         "-o-border-image-width",
  100.         "border-image-width",
  101.         "-webkit-border-image-outset",
  102.         "-moz-border-image-outset",
  103.         "-o-border-image-outset",
  104.         "border-image-outset",
  105.         "-webkit-border-image-repeat",
  106.         "-moz-border-image-repeat",
  107.         "-o-border-image-repeat",
  108.         "border-image-repeat",
  109.         "padding",
  110.         "padding-top",
  111.         "padding-right",
  112.         "padding-bottom",
  113.         "padding-left",
  114.         "width",
  115.         "min-width",
  116.         "max-width",
  117.         "height",
  118.         "min-height",
  119.         "max-height"
  120.     ],
  121.     [
  122.         "font",
  123.         "font-family",
  124.         "font-size",
  125.         "font-weight",
  126.         "font-style",
  127.         "font-variant",
  128.         "font-size-adjust",
  129.         "font-stretch",
  130.         "font-effect",
  131.         "font-emphasize",
  132.         "font-emphasize-position",
  133.         "font-emphasize-style",
  134.         "font-smooth",
  135.         "line-height",
  136.         "text-align",
  137.         "-webkit-text-align-last",
  138.         "-moz-text-align-last",
  139.         "-ms-text-align-last",
  140.         "text-align-last",
  141.         "vertical-align",
  142.         "white-space",
  143.         "text-decoration",
  144.         "text-emphasis",
  145.         "text-emphasis-color",
  146.         "text-emphasis-style",
  147.         "text-emphasis-position",
  148.         "text-indent",
  149.         "-ms-text-justify",
  150.         "text-justify",
  151.         "letter-spacing",
  152.         "word-spacing",
  153.         "-ms-writing-mode",
  154.         "text-outline",
  155.         "text-transform",
  156.         "text-wrap",
  157.         "-ms-text-overflow",
  158.         "text-overflow",
  159.         "text-overflow-ellipsis",
  160.         "text-overflow-mode",
  161.         "-ms-word-wrap",
  162.         "word-wrap",
  163.         "-ms-word-break",
  164.         "word-break"
  165.     ],
  166.     [
  167.         "color",
  168.         "background",
  169.         "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
  170.         "background-color",
  171.         "background-image",
  172.         "background-repeat",
  173.         "background-attachment",
  174.         "background-position",
  175.         "-ms-background-position-x",
  176.         "background-position-x",
  177.         "-ms-background-position-y",
  178.         "background-position-y",
  179.         "-webkit-background-clip",
  180.         "-moz-background-clip",
  181.         "background-clip",
  182.         "background-origin",
  183.         "-webkit-background-size",
  184.         "-moz-background-size",
  185.         "-o-background-size",
  186.         "background-size"
  187.     ],
  188.     [
  189.         "outline",
  190.         "outline-width",
  191.         "outline-style",
  192.         "outline-color",
  193.         "outline-offset",
  194.         "opacity",
  195.         "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
  196.         "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
  197.         "-ms-interpolation-mode",
  198.         "-webkit-box-shadow",
  199.         "-moz-box-shadow",
  200.         "box-shadow",
  201.         "filter:progid:DXImageTransform.Microsoft.gradient",
  202.         "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
  203.         "text-shadow"
  204.     ],
  205.     [
  206.         "-webkit-transition",
  207.         "-moz-transition",
  208.         "-ms-transition",
  209.         "-o-transition",
  210.         "transition",
  211.         "-webkit-transition-delay",
  212.         "-moz-transition-delay",
  213.         "-ms-transition-delay",
  214.         "-o-transition-delay",
  215.         "transition-delay",
  216.         "-webkit-transition-timing-function",
  217.         "-moz-transition-timing-function",
  218.         "-ms-transition-timing-function",
  219.         "-o-transition-timing-function",
  220.         "transition-timing-function",
  221.         "-webkit-transition-duration",
  222.         "-moz-transition-duration",
  223.         "-ms-transition-duration",
  224.         "-o-transition-duration",
  225.         "transition-duration",
  226.         "-webkit-transition-property",
  227.         "-moz-transition-property",
  228.         "-ms-transition-property",
  229.         "-o-transition-property",
  230.         "transition-property",
  231.         "-webkit-transform",
  232.         "-moz-transform",
  233.         "-ms-transform",
  234.         "-o-transform",
  235.         "transform",
  236.         "-webkit-transform-origin",
  237.         "-moz-transform-origin",
  238.         "-ms-transform-origin",
  239.         "-o-transform-origin",
  240.         "transform-origin",
  241.         "-webkit-animation",
  242.         "-moz-animation",
  243.         "-ms-animation",
  244.         "-o-animation",
  245.         "animation",
  246.         "-webkit-animation-name",
  247.         "-moz-animation-name",
  248.         "-ms-animation-name",
  249.         "-o-animation-name",
  250.         "animation-name",
  251.         "-webkit-animation-duration",
  252.         "-moz-animation-duration",
  253.         "-ms-animation-duration",
  254.         "-o-animation-duration",
  255.         "animation-duration",
  256.         "-webkit-animation-play-state",
  257.         "-moz-animation-play-state",
  258.         "-ms-animation-play-state",
  259.         "-o-animation-play-state",
  260.         "animation-play-state",
  261.         "-webkit-animation-timing-function",
  262.         "-moz-animation-timing-function",
  263.         "-ms-animation-timing-function",
  264.         "-o-animation-timing-function",
  265.         "animation-timing-function",
  266.         "-webkit-animation-delay",
  267.         "-moz-animation-delay",
  268.         "-ms-animation-delay",
  269.         "-o-animation-delay",
  270.         "animation-delay",
  271.         "-webkit-animation-iteration-count",
  272.         "-moz-animation-iteration-count",
  273.         "-ms-animation-iteration-count",
  274.         "-o-animation-iteration-count",
  275.         "animation-iteration-count",
  276.         "-webkit-animation-direction",
  277.         "-moz-animation-direction",
  278.         "-ms-animation-direction",
  279.         "-o-animation-direction",
  280.         "animation-direction"
  281.     ],
  282.     [
  283.         "content",
  284.         "quotes",
  285.         "counter-reset",
  286.         "counter-increment",
  287.         "resize",
  288.         "cursor",
  289.         "-webkit-user-select",
  290.         "-moz-user-select",
  291.         "-ms-user-select",
  292.         "user-select",
  293.         "nav-index",
  294.         "nav-up",
  295.         "nav-right",
  296.         "nav-down",
  297.         "nav-left",
  298.         "-moz-tab-size",
  299.         "-o-tab-size",
  300.         "tab-size",
  301.         "-webkit-hyphens",
  302.         "-moz-hyphens",
  303.         "hyphens",
  304.         "pointer-events"
  305.     ]
  306. ]