HTML

使用 html5 文档声名

<!DOCTYPE html>

必须声名 charset 为 utf-8

<meta charset="uf-8">

为 html 标签指定 lang 属性

<html lang="zh-CN">
</html>

不要在自闭合元素尾部加斜线

<meta charset="utf-8"> 规范
<meta charset="utf-8"/> 不规范

对于属性的定义,确保使用双引号,不要使用单引号

<meta charset="utf-8"> 规范
<meta charset='utf-8'> 不规范

html 属性顺序

  • class
  • id,name
  • data-*
  • src,for,type,href,value

html 结构一定要清晰,各模块间要相对独立,以实现代码复用(特别是 header , footer)

<header>
    nav here
</header>

<div class="main">
    <section class="search">
        search here
    </section>
    <section class="banner">
        banner here
    </section>
    <section class="news">
        news here
    </section>
    ...
</div>

<footer>
    footer here
</footer>

在定义一系列相似标签时,要保证属性一致(如对某一标签有特殊样式定义,考虑 CSS 选择器高级用法)
此处用 li 举例, div 同理 , 并且div使用更为广泛

正确
<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

错误
<ul>
    <li class="item item-first"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item success"></li>
</ul>

class 的定义一定不要采用拼音或缩写,最好能从字面上看到看到它的作用,只能由小写和中横线构成

正确
<div class="apple">
</div>

错误
<div class="ping_guo">
</div>

错误
<div class="pg">
</div>

养成写注释的习惯

<!-- Product start -->
    <div class="apple"></div>
    <div class="banana"></div>
    <div class="orange"></div>
<!-- Product end -->

CSS

不要把CSS,JS混写到html

极不推荐
    <style>
        ...
    </style>
    <script>
        ...
    </script>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

为保证团队快速理解代码,推荐使用 Bootstrap 做页面布局

    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
        </div>
    </div>

尽量使用 class 渲染,尽量不要用 id 渲染

推荐
.apple{
    color:#000;
}
不推荐
#apple{
    color:#000;
}

使用 SASS , 便于后期维护

$red:#ec2028;
$alert:blue;
$background-color:gray;

ul{
    width:300px;
    margin-left:0;
    background-color:$background-color;
    li{
        height:30px;
        line-height:30px;
        color:$red;
        &:hover{
            color:$alert;
        }
    }
}

不要乱用浮动,有的场景用 inline-block逻辑更好 

.apple{
    font-size:0px;
    li{
        display:inline-block;
        font-size:17px;
    }
}

其他

  • 设置编辑器文件编码为 utf-8
  • 善用 Font Awesome