【前端开发规范】 原创

发布于 2022-5-16 10:25
浏览
0收藏

原文

前端开发规范(实验室版) - 简书

前言

一、HTML命名规范
二、HTML 引号、缩进和注释
三、CSS一般规范
四、Javascript 的命名空间规范

原文
 前端开发规范(实验室版)
前言
在团队协作开发中,若个人的编码习惯不规范,会造成后期代码维护成本很高,一段规范、可读性很高的代码,会让开发者心情愉悦。

一、HTML命名规范
文件名称命名统一用小写的英文字母,数字和下划线的组合,不得包含汉字空格和特殊符号。

不推荐

产品.html
index_%.html
about-us.html
1.html

推荐

product.html
index.html
aboutus.html

二、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>

推荐

<!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>

三、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; 
}

推荐

.content {
    font-weight: 600;
}
.content .title {
    font-size: 14px;
}
.content >.content-header >.title {
     font-size: 2em;
}
.nav li a{
     color:#000;
}

不推荐

<div class="nav">
  <ul>
    <li>首页</li>
    <li>产品介绍</li>
    <li>关于我们</li>
  </ul>
<div>
.nav li a{
    padding-top:10px;
}

推荐

<div class="nav nav-hqg">
  <ul>
    <li>首页</li>
    <li>产品介绍</li>
    <li>关于我们</li>
  </ul>
<div>
/*----------针对接手的是中期项目而言 start----------*/
.nav-hqg .nav li a{//假如开发者叫花千骨
    padding-top:10px;
}
/*----------针对接手的是中期项目而言 end----------*/

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

/*----------header start----------*/
     这里是书写header css样式
/*----------header end----------*/
单行注释请使用 //注释

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

作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):

结构性属性:

display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding

表现性属性:

background, border etc.
font, text

不推荐

.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;
}

推荐

.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;
}

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-5-17 17:37:32修改
1
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐