【前端开发规范】原创

xjj前端妹_雅

发布于 2022-5-16 10:25

浏览

0收藏

推荐

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修改