网站实现前端规范及注意事项

文档

愿景

不管项目有多少人共同参与，代码都像是同一个人编写的。

html编码规范

• 4空格缩进、空标签禁止换行
• 各模块间保留注释，尤其公用部分
• channel_content 有页面样式名
• 禁止冗余嵌套，但是必须的父层不能少：百度地图容器、rect-摘可视化等，详见注意事项
• <script> <link>标签不需要type属性
• 全部使用双引号""
• 自闭合标签结尾不加/ 常见自闭合标签：<img> <input> <br>
• 标签必须正确闭合，使用小写字母
• 标签符合嵌套规则，如：<p>不可嵌套其他标签，<li>置于<ul>中， <a>不可嵌套<a>
• 合理使用语义化标签 logo用<h1>, <ul> <li> <i> <header> <footer> <nav> <section>
• <a>嵌套logo时，加上title属性
• 布尔（boolean）型属性在声明时不赋值

<input  type="text" disabled readonly>
<video loop muted autoplay></video>
<select>
    <option value="" selected></option>
</select>

• 短标题换行尽量不用<br>,可以用display:block来换行，方便响应

css编码规范

• 4空格缩进
• 禁止出现无样式空代码段
• 布局样式禁止使用css3选择器，ie8无法兼容，错位
• 页面样式名继承写法
• 注释紧挨代码段，减少合并时跑位的概率。
• 推荐无换行写法节省空间，结尾;结束，;后空1个空格

.header{height:105px; position:fixed; left:0; top:0; width:100%;}
.header .inav{font-size:14px; color:#404040;}

• 全部使用双引号""
• 禁止直接使用标签选择器

header{}

• 选择器的层级不易过长，尽量5级以内
• 尽量使用缩写 margin padding border transition
• 属性书写顺序 推荐按照 '布局' '尺寸' '文本' '视觉效果'的顺序来书写，提高可读性

.sidebar {
     /* 位置 */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;
    /* 尺寸 */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;
    /* 文本*/
    font-size: 14px;
    line-height: 20px;
    /* 视觉效果 */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
            transition: color 1s;
}

• 中文网站默认字体微软雅黑，英文网站默认Arial
• 样式表头部添加注释，填写负责人姓名缩写

/* author: heql
 * date: 2018-02-28
 */

• 后期调整样式表添加修改日期 和修改人注释

/*2017-02-16 by heql*/

• 多人协作时，要加各自姓名注释，且注意命名冲突问题。
• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。命名应通俗易懂，形式以下划线链接单词，单词可由功能或位置起名。tool_bar news_left
• 少用浮点数

js编码规范

• 2空格缩进
• 命名方式 驼峰式，语义推荐用动宾短语（动词开头），构造函数首字母大写（大驼峰）
• 一些需要说明的变量或对象或数组或函数请一定要注释说明一下，说不定你自己明天就不记得了
• 其他参考《Javascript编码规范》

网站注意事项

• 设计从右往左排，录入却从左往右录，不要用float:right; 应该用text-align:right;
• data- 属性的dom元素，如果摘成后台可视化录入，dom外层需要有包裹容器控制布局。
• 地图 .mab_box{overflow:hidden;} .mab_box img{max-width:none;}
• 地图等挂件，外面需有div包裹
• 带背景的区域高度由内容撑，上下加padding,高度不写死，背景图做成后台录入，方便替换。
• 把阿里图标库字体文件替换为本地，取消11638？
• 上线前禁止搜索引擎抓取快照<meta name="robots" content="noarchive"><!--禁止搜素引擎抓取快照-->
• 编辑框不要加首行缩进样式，设计可以后台加

一些奇葩的坑

以下都是工作中不易发现的坑，可能踩进去就出不来了，持续补充此类bug,便于大家查找问题，快速解决。

• z-index:-1需合理使用，，绝对定位的情况下，加z-index:-1的元素，不会触发重排，产生缝隙。案例
• 滚动加载，append的容器里禁止使用绝对定位的伪类，因为伪类定位在appened元素之后，滚动条的位置会始终显示出它，一直触发加载条件。bug处理思路：滚动加载有问题，先排查是否条件写的不对，再看是否有定位的伪类。案例
• 拖拽窗口时,移动端导航层级错位，由于PC端时执行了.slideDown()之类的方法，改变dom元素的内联样式，移动端没有清除。

IE的坑

• 空的<a>标签，会导致链接失效，ie9以下会出现此bug，加背景可解决background:url(about:blank);
• input需设置line-height,ie8会跑偏
• background缩写样式属性间要有空格

.bg{background:url(../bg.jpg)repeat} //报错

项目启动会

• 图片比例
• 分页、点击加载，滚动加载
• 视频 本地视频，还是第三方视频
• banner 全屏还是固定高度,文字录入还是做图，文字共用还是单独录。