• 属性声明顺序

    属性声明顺序

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

    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. ]