前端开发规范

最新推荐文章于 2024-04-05 13:27:48 发布

weixin_42782274

最新推荐文章于 2024-04-05 13:27:48 发布

阅读量136

点赞数

文章标签：前端 html5 代码规范

原文链接：https://www.jianshu.com/p/3140a2c5dade

版权

原文

前端开发规范（实验室版） - 简书

前言

在团队协作开发中，若个人的编码习惯不规范，会造成后期代码维护成本很高，一段规范、可读性很高的代码，会让开发者心情愉悦。

一、HTML命名规范

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

不推荐

产品.html
index_%.html
about-us.html
1.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>

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

PS

⭐️当实验室是以团队开发一个项目时，如果是一个从0开始的项目，那么每个人都会有几个页面要写，每个页面请尽量都新建一个css的文件写一份独立的样式，然后引入到html中。在有条件的基础上，再推荐使用全局样式的形式。
⭐️如果是接手的一个中期的项目，当大家分配几个页面时，css样式一定要新建一个文件写，不要在别人的样式里写，更不要写在html中，这样后期合并会相当麻烦，最重要的一点就是写css样式的时候记得在最前面添加一个全局的独有的class选择器，(一般来说这种项目都是很规范的，会有公共样式，重用样式等)这里推荐以功能+自己姓名的小写字母开头作为全局独有的class选择器，这样做的好处是后期css合并为一个css文件时方便合并，不会担心大家写的样式相互干扰。

不推荐

<div class="nav">
  <ul>
    <li>首页</li>
    <li>产品介绍</li>
    <li>关于我们</li>
  </ul>
<div>

／*----------针对接手的是中期项目而言 start----------*／
.nav li a{ //这里的.nav假定为公共class，那后期合并会相互干扰
    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;
}