html，css 开发规范

锋行天下
414 阅读4分钟

1.项目命名

全部采用小写方式，以下划线（或中划线）分隔。
例：taro-v2ex-hooks、taro_v2ex_hooks

2.目录命名

全部采用小写方式， 以下划线（或中划线）分隔，有复数结构时，要采用复数命名法， 缩写不用复数。
例：styles、utils、img、demo_styles

3.命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，纯拼音也要避免。国际通用的名称，可视同英文。
正例：shenzhen、rmb
反例：getGuoJiaName()

4.语法

  • 缩进使用 2 个空格
  • 嵌套的节点应该缩进
  • 优先使用语义化标签
  • 在属性上，使用双引号 例如：
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <header></header>
    <img src="images/company_logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
    <footer></footer>
  </body>
</html>

5属性顺序

属性应该按照特定的顺序出现以保证易读性

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value , max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled class 是为高可复用组件设计的，所以应处在第一位。
    id 更加具体且应该尽量少使用，所以将它放在第二位
    例：<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

6 css命名

  • 类名使用小写字母，以中划线（或下划线）分隔
  • id 采用驼峰式命名
  • scss 中的变量、函数、混合、placeholder 采用驼峰式命名 例如：
#myApp {
    font-weight: 400;
}

.hello-world {
    font-size: 24px;
}

7.空格

  • 属性值前
  • 选择器 >, +, ~ 前后
  • { 前
  • !important 中 ! 前
  • @else 前后
  • 属性值中的 , 后
  • 注释 /* 后和 */ 前 例如：
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

@if {
    ...
} @else {
    ...
}

8 换行

  • { 后和 } 前
  • 每个属性独占一行
  • 多个规则的分隔符 , 后 例如：
.element {
    color: red;
    background-color: black;
}

.main,
.dialog {
    ...
}

9.属性顺序

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

.declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}

下面是推荐的属性的顺序：

[    [        "display",        "visibility",        "float",        "clear",        "overflow",        "overflow-x",        "overflow-y",        "clip",        "zoom"    ],
    [        "table-layout",        "empty-cells",        "caption-side",        "border-spacing",        "border-collapse",        "list-style",        "list-style-position",        "list-style-type",        "list-style-image"    ],
    [        "-webkit-box-orient",        "-webkit-box-direction",        "-webkit-box-decoration-break",        "-webkit-box-pack",        "-webkit-box-align",        "-webkit-box-flex"    ],
    [        "position",        "top",        "right",        "bottom",        "left",        "z-index"    ],
    [        "margin",        "margin-top",        "margin-right",        "margin-bottom",        "margin-left",        "-webkit-box-sizing",        "-moz-box-sizing",        "box-sizing",        "border",        "border-width",        "border-style",        "border-color",        "border-top",        "border-top-width",        "border-top-style",        "border-top-color",        "border-right",        "border-right-width",        "border-right-style",        "border-right-color",        "border-bottom",        "border-bottom-width",        "border-bottom-style",        "border-bottom-color",        "border-left",        "border-left-width",        "border-left-style",        "border-left-color",        "-webkit-border-radius",        "-moz-border-radius",        "border-radius",        "-webkit-border-top-left-radius",        "-moz-border-radius-topleft",        "border-top-left-radius",        "-webkit-border-top-right-radius",        "-moz-border-radius-topright",        "border-top-right-radius",        "-webkit-border-bottom-right-radius",        "-moz-border-radius-bottomright",        "border-bottom-right-radius",        "-webkit-border-bottom-left-radius",        "-moz-border-radius-bottomleft",        "border-bottom-left-radius",        "-webkit-border-image",        "-moz-border-image",        "-o-border-image",        "border-image",        "-webkit-border-image-source",        "-moz-border-image-source",        "-o-border-image-source",        "border-image-source",        "-webkit-border-image-slice",        "-moz-border-image-slice",        "-o-border-image-slice",        "border-image-slice",        "-webkit-border-image-width",        "-moz-border-image-width",        "-o-border-image-width",        "border-image-width",        "-webkit-border-image-outset",        "-moz-border-image-outset",        "-o-border-image-outset",        "border-image-outset",        "-webkit-border-image-repeat",        "-moz-border-image-repeat",        "-o-border-image-repeat",        "border-image-repeat",        "padding",        "padding-top",        "padding-right",        "padding-bottom",        "padding-left",        "width",        "min-width",        "max-width",        "height",        "min-height",        "max-height"    ],
    [        "font",        "font-family",        "font-size",        "font-weight",        "font-style",        "font-variant",        "font-size-adjust",        "font-stretch",        "font-effect",        "font-emphasize",        "font-emphasize-position",        "font-emphasize-style",        "font-smooth",        "line-height",        "text-align",        "-webkit-text-align-last",        "-moz-text-align-last",        "-ms-text-align-last",        "text-align-last",        "vertical-align",        "white-space",        "text-decoration",        "text-emphasis",        "text-emphasis-color",        "text-emphasis-style",        "text-emphasis-position",        "text-indent",        "-ms-text-justify",        "text-justify",        "letter-spacing",        "word-spacing",        "-ms-writing-mode",        "text-outline",        "text-transform",        "text-wrap",        "-ms-text-overflow",        "text-overflow",        "text-overflow-ellipsis",        "text-overflow-mode",        "-ms-word-wrap",        "word-wrap",        "-ms-word-break",        "word-break"    ],
    [        "color",        "background",        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",        "background-color",        "background-image",        "background-repeat",        "background-attachment",        "background-position",        "-ms-background-position-x",        "background-position-x",        "-ms-background-position-y",        "background-position-y",        "-webkit-background-clip",        "-moz-background-clip",        "background-clip",        "background-origin",        "-webkit-background-size",        "-moz-background-size",        "-o-background-size",        "background-size"    ],
    [        "outline",        "outline-width",        "outline-style",        "outline-color",        "outline-offset",        "opacity",        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",        "-ms-interpolation-mode",        "-webkit-box-shadow",        "-moz-box-shadow",        "box-shadow",        "filter:progid:DXImageTransform.Microsoft.gradient",        "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",        "text-shadow"    ],
    [        "-webkit-transition",        "-moz-transition",        "-ms-transition",        "-o-transition",        "transition",        "-webkit-transition-delay",        "-moz-transition-delay",        "-ms-transition-delay",        "-o-transition-delay",        "transition-delay",        "-webkit-transition-timing-function",        "-moz-transition-timing-function",        "-ms-transition-timing-function",        "-o-transition-timing-function",        "transition-timing-function",        "-webkit-transition-duration",        "-moz-transition-duration",        "-ms-transition-duration",        "-o-transition-duration",        "transition-duration",        "-webkit-transition-property",        "-moz-transition-property",        "-ms-transition-property",        "-o-transition-property",        "transition-property",        "-webkit-transform",        "-moz-transform",        "-ms-transform",        "-o-transform",        "transform",        "-webkit-transform-origin",        "-moz-transform-origin",        "-ms-transform-origin",        "-o-transform-origin",        "transform-origin",        "-webkit-animation",        "-moz-animation",        "-ms-animation",        "-o-animation",        "animation",        "-webkit-animation-name",        "-moz-animation-name",        "-ms-animation-name",        "-o-animation-name",        "animation-name",        "-webkit-animation-duration",        "-moz-animation-duration",        "-ms-animation-duration",        "-o-animation-duration",        "animation-duration",        "-webkit-animation-play-state",        "-moz-animation-play-state",        "-ms-animation-play-state",        "-o-animation-play-state",        "animation-play-state",        "-webkit-animation-timing-function",        "-moz-animation-timing-function",        "-ms-animation-timing-function",        "-o-animation-timing-function",        "animation-timing-function",        "-webkit-animation-delay",        "-moz-animation-delay",        "-ms-animation-delay",        "-o-animation-delay",        "animation-delay",        "-webkit-animation-iteration-count",        "-moz-animation-iteration-count",        "-ms-animation-iteration-count",        "-o-animation-iteration-count",        "animation-iteration-count",        "-webkit-animation-direction",        "-moz-animation-direction",        "-ms-animation-direction",        "-o-animation-direction",        "animation-direction"    ],
    [        "content",        "quotes",        "counter-reset",        "counter-increment",        "resize",        "cursor",        "-webkit-user-select",        "-moz-user-select",        "-ms-user-select",        "user-select",        "nav-index",        "nav-up",        "nav-right",        "nav-down",        "nav-left",        "-moz-tab-size",        "-o-tab-size",        "tab-size",        "-webkit-hyphens",        "-moz-hyphens",        "hyphens",        "pointer-events"    ]
]

10 属性简写

属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰。
常见的属性简写包括：

  • font
  • background
  • transition
  • animation 例如：
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}
avatar
文章
阅读
粉丝