【前端开发规范】原创

xjj前端妹_雅

发布于 2022-5-16 10:25

浏览

0收藏

推荐

product.html
index.html
aboutus.html
1.
2.
3.

二、HTML 引号、缩进和注释
写代码一定要写注释
使用双引号(“”) 而不是单引号(‘’)
tab缩进为两个空格
html注释的格式统一为：
（对于一般性的解释说明可以去掉start、end，如）
不推荐

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="main.css">
  <script src="main.js" async></script>
</head>
<body>
 <header>
    <nav class='header'>
      <div class='container'></div>
   </nav>
   <nav class="main-nav">
      <div class="container"></div></nav>
</header>
<footer>
  <div class="container"></div>
</footer>
 </body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

推荐

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="main.css">
  <script src="main.js" async></script>
</head>
<body>
<!-- 头部 start-->
<header>
  <!-- 顶部 start-->
  <nav class='header'>
      <div class='container'></div>
  </nav>
  <!-- 顶部 end-->
  <!-- logo+导航 start-->
  <nav class="main-nav">
      <div class="container">
      <h1>这是标题1</h1>
      <!---这是全文的正文标题-->
      </div>
  </nav>
  <!-- logo+导航 end-->
</header>
<!-- 头部 end-->
<!-- 正文 start-->
<div class="container"></div>
<!-- 正文 end-->
<footer>
  <div class="container"></div>
</footer>
</body>
</html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

三、CSS一般规范
一般来说id是不应该应用于样式的，尽量使用class,避免使用标签选择器，如果一定要使用请在前面加一只限制范围的class选择器，一般来说针对同一样式的选择器不超过三个为好。

1、书写规范
不推荐

.p-1 { //命名不规范
    font-weight: 600;
}
#content #title { //使用了id
    font-size: 14px;
}
div.content > header.content-header > h2.title { //使用了标签名
     font-size: 2em;
}
.container .nav ul li a { //选择器太多
     color:#000; 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

推荐

.content {
    font-weight: 600;
}
.content .title {
    font-size: 14px;
}
.content >.content-header >.title {
     font-size: 2em;
}
.nav li a{
     color:#000;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

不推荐

<div class="nav">
  <ul>
    <li>首页</li>
    <li>产品介绍</li>
    <li>关于我们</li>
  </ul>
<div>
.nav li a{
    padding-top:10px;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

推荐

<div class="nav nav-hqg">
  <ul>
    <li>首页</li>
    <li>产品介绍</li>
    <li>关于我们</li>
  </ul>
<div>
1.
2.
3.
4.
5.
6.
7.

／*----------针对接手的是中期项目而言 start----------*／
.nav-hqg .nav li a{//假如开发者叫花千骨
    padding-top:10px;
}
／*----------针对接手的是中期项目而言 end----------*／
1.
2.
3.
4.
5.

2、CSS的注释和缩写属性
请大家尽量把注释写全，最好是分模块写注释，假定现在写的是header里面的css样式，请使用

／*----------header start----------*／
     这里是书写header css样式
／*----------header end----------*／
单行注释请使用 //注释
1.
2.
3.
4.

//这是单行注释
3、CSS排版规范
这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：

display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
1.
2.
3.
4.

表现性属性：

background, border etc.
font, text
1.
2.

不推荐

.box {
    font-family: 'Arial', sans-serif;
    border: 3px solid #ddd;
    left: 30%;
    position: absolute;
    text-transform: uppercase;
    background-color: #eee;    
    right: 30%;
    display: block;
    font-size: 1.5rem;
    overflow: hidden;
    padding: 1em;
    margin: 1em;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

推荐

.box {
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    overflow: hidden;
    margin: 1em;
    padding: 1em;
    background-color: #eee;
    border: 3px solid #ddd;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

分类

开发语言

标签

开发规范

已于2022-5-17 17:37:32修改

51CTO

51CTO博客

51CTO学堂

【前端开发规范】原创

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

【前端开发规范】 原创

订阅鸿蒙技术特刊，精选内容抢先看

【前端开发规范】原创