【03】品优购电商项目:00-品优购项目代码规范
文章目录
- 代码规范
- 1. 概述
- HTML规范
- 图片规范
- CSS规范
- 命名规范
- 2. HTML 规范
- DOCTYPE 声明
- 页面语言lang
- charset 字符集合
- 书写风格
- HTML代码大小写
- 类型属性
- 元素属性
- 特殊字符引用
- 代码缩进
- 代码嵌套
- 3. 图片规范
- 内容图
- 背景图
- 4. CSS规范
- 代码格式化
- 代码大小写
- 选择器
- 代码缩进
- 分号
- 代码易读性
- 属性值引号
- 属性书写顺序
- 命名规范
- 目录命名
- ClassName命名
- 常用命名推荐
代码规范
1. 概述
欢迎使用品优购代码规范, 这个是我借鉴京东前端代码规范,组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,
以下规范是团队基本约定的内容,必须严格遵循。
HTML规范
基于 W3C、苹果开发者 等官方文档,并结合团队业务和开发过程中总结的规范约定,让页面HTML代码更具语义性。
图片规范
了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等,旨在从图片层面优化页面性能。
CSS规范
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格,提供常用媒体查询语句和浏览器私有属性引用,并从业务层面统一规范常用模块的引用。
命名规范
从 目录
、图片
、HTML/CSS文件
、ClassName
的命名等层面约定规范团队的命名习惯,增强团队代码的可读性。
2. HTML 规范
DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:
<!DOCTYPE html>
HTML5标准模版
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML5标准模版</title></head><body></body>
</html>
页面语言lang
推荐使用属性值 cmn-Hans-CN
(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN
属性值
<html lang="zh-CN">
更多地区语言参考:
zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
charset 字符集合
一般情况下统一使用 “UTF-8” 编码
<meta charset="UTF-8">
由于历史原因,有些业务可能会使用 “GBK” 编码
<meta charset="GBK">
请尽量统一写成标准的 “UTF-8”,不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义,其编码标准的写法是 “UTF-8”;而 UTF8 或 utf8 的写法只是出现在某些编程系统中,如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。
书写风格
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐:
<div class="demo"></div>
不推荐:
<div class="DEMO"></div><DIV CLASS="DEMO"></DIV>
类型属性
不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含
推荐:
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐:
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
推荐:
<input type="text">
<input type="radio" name="name" checked="checked" >
不推荐:
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
特殊字符引用
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体
推荐:
<a href="#">more>></a>
不推荐:
<a href="#">more>></a>
代码缩进
统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)
<div class="jdc"><a href="#"></a>
</div>
代码嵌套
元素嵌套规范,每个块状元素独立一行,内联元素可选
推荐:
<div><h1></h1><p></p>
</div>
<p><span></span><span></span></p>
不推荐:
<div><h1></h1><p></p>
</div>
<p> <span></span><span></span>
</p>
段落元素与标题元素只能嵌套内联元素
推荐:
<h1><span></span></h1>
<p><span></span><span></span></p>
不推荐:
<h1><div></div></h1>
<p><div></div><div></div></p>
3. 图片规范
内容图
内容图多以商品图等照片类图片形式存在,颜色较为丰富,文件体积较大
- 优先考虑 JPEG 格式,条件允许的话优先考虑 WebP 格式
- 尽量不使用PNG格式,PNG8 色位太低,PNG24 压缩率低,文件体积大
- PC平台单张的图片的大小不应大于 200KB。
背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
- PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
- 图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式
- 图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式
- 图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式
- 条件允许的,优先考虑 WebP 代替 PNG 和 JPEG 格式
4. CSS规范
代码格式化
样式书写一般有两种:一种是紧凑格式 (Compact)
.jdc { display: block;width: 50px;}
一种是展开格式(Expanded)
.jdc {display: block;width: 50px;
}
团队约定
统一使用展开格式书写样式
代码大小写
样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
/* 推荐 */
.jdc{display:block;
}/* 不推荐 */
.JDC{DISPLAY:BLOCK;
}
选择器
- 尽量少用通用选择器
*
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}/* 不推荐 */
*{}
#jdc {}
.jdc div{}
代码缩进
统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)
.jdc {width: 100%;height: 100%;
}
分号
每个属性声明末尾都要加分号;
.jdc {width: 100%;height: 100%;
}
代码易读性
左括号与类名之间一个空格,冒号与属性值之间一个空格
推荐:
.jdc { width: 100%;
}
不推荐:
.jdc{ width:100%;
}
逗号分隔的取值,逗号之后一个空格
推荐:
.jdc {box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推荐:
.jdc {box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
为单个css选择器或新申明开启新行
推荐:
.jdc,
.jdc_logo,
.jdc_hd {color: #ff0;
}
.nav{color: #fff;
}
不推荐:
.jdc,jdc_logo,.jdc_hd {color: #ff0;
}.nav{color: #fff;
}
颜色值 rgb()
rgba()
hsl()
hsla()
rect()
中不需有空格,且取值不要带有不必要的 0
推荐:
.jdc {color: rgba(255,255,255,.5);
}
不推荐:
.jdc {color: rgba( 255, 255, 255, 0.5 );
}
属性值十六进制数值能用简写的尽量用简写
推荐:
.jdc {color: #fff;
}
不推荐:
.jdc {color: #ffffff;
}
不要为 0
指明单位
推荐:
.jdc {margin: 0 10px;
}
不推荐:
.jdc {margin: 0px 10px;
}
属性值引号
css属性值需要用到引号时,统一使用单引号
/* 推荐 */
.jdc { font-family: 'Hiragino Sans GB';
}/* 不推荐 */
.jdc { font-family: "Hiragino Sans GB";
}
属性书写顺序
建议遵循以下顺序:
- 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
- 自身属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;
}
mozilla官方属性顺序推荐
命名规范
由历史原因及个人习惯引起的 DOM 结构、命名不统一,导致不同成员在维护同一页面时,效率低下,迭代、维护成本极高。
目录命名
- 项目文件夹:pinyougou
- 样式文件夹:css
- 脚本文件夹:js
- 样式类图片文件夹:img
- 产品类图片文件夹: upload
- 字体类文件夹: fonts
ClassName命名
ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接
.nav_top
常用命名推荐
注意:ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName,因为有些浏览器插件(Chrome的广告拦截插件等)会直接过滤这些类名,因此
<div class="ad"></div>
这种广告的英文或拼音类名不应该出现
另外,敏感不和谐字眼也不应该出现,如:
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
ClassName | 含义 |
---|---|
about | 关于 |
account | 账户 |
arrow | 箭头图标 |
article | 文章 |
aside | 边栏 |
audio | 音频 |
avatar | 头像 |
bg,background | 背景 |
bar | 栏(工具类) |
branding | 品牌化 |
crumb,breadcrumbs | 面包屑 |
btn,button | 按钮 |
caption | 标题,说明 |
category | 分类 |
chart | 图表 |
clearfix | 清除浮动 |
close | 关闭 |
col,column | 列 |
comment | 评论 |
community | 社区 |
container | 容器 |
content | 内容 |
copyright | 版权 |
current | 当前态,选中态 |
default | 默认 |
description | 描述 |
details | 细节 |
disabled | 不可用 |
entry | 文章,博文 |
error | 错误 |
even | 偶数,常用于多行列表或表格中 |
fail | 失败(提示) |
feature | 专题 |
fewer | 收起 |
field | 用于表单的输入区域 |
figure | 图 |
filter | 筛选 |
first | 第一个,常用于列表中 |
footer | 页脚 |
forum | 论坛 |
gallery | 画廊 |
group | 模块,清除浮动 |
header | 页头 |
help | 帮助 |
hide | 隐藏 |
hightlight | 高亮 |
home | 主页 |
icon | 图标 |
info,information | 信息 |
last | 最后一个,常用于列表中 |
links | 链接 |
login | 登录 |
logout | 退出 |
logo | 标志 |
main | 主体 |
menu | 菜单 |
meta | 作者、更新时间等信息栏,一般位于标题之下 |
module | 模块 |
more | 更多(展开) |
msg,message | 消息 |
nav,navigation | 导航 |
next | 下一页 |
nub | 小块 |
odd | 奇数,常用于多行列表或表格中 |
off | 鼠标离开 |
on | 鼠标移过 |
output | 输出 |
pagination | 分页 |
pop,popup | 弹窗 |
preview | 预览 |
previous | 上一页 |
primary | 主要 |
progress | 进度条 |
promotion | 促销 |
rcommd,recommendations | 推荐 |
reg,register | 注册 |
save | 保存 |
search | 搜索 |
secondary | 次要 |
section | 区块 |
selected | 已选 |
share | 分享 |
show | 显示 |
sidebar | 边栏,侧栏 |
slide | 幻灯片,图片切换 |
sort | 排序 |
sub | 次级的,子级的 |
submit | 提交 |
subscribe | 订阅 |
subtitle | 副标题 |
success | 成功(提示) |
summary | 摘要 |
tab | 标签页 |
table | 表格 |
txt,text | 文本 |
thumbnail | 缩略图 |
time | 时间 |
tips | 提示 |
title | 标题 |
video | 视频 |
wrap | 容器,包,一般用于最外层 |
wrapper | 容器,包,一般用于最外层 |
【03】品优购电商项目:00-品优购项目代码规范相关推荐
- 优品购电商3.0微服务商城项目实战小结
优品购电商3.0分布式微服务项目由业务集群系统+后台管理系统构成,打通了微服务分布式开发及全栈开发技能,前后分离全栈开发.该项目是开发一个全品类的电商购物平台(B2C). 技术选型: 前端:Vue+服 ...
- 电商 竞品分析_电商平台竞品分析报告.docx
Planning scheme 电商平台竞品分析报告 电商平台竞品分析报告 电商平台竞品分析报告 V1.0 2018-3-18 状态 : [ √ ] 草稿 [ ] 修改中 [ ] 定稿 文件标签: 竞 ...
- 优品购电商3.0微服务商城项目
2020.3.9.Vue SpringCloud复习.rar 2020.3.10.Mockjs模拟数据(1).rar 2020.3.10.Mockjs模拟数据.rar 2020.3.12.Nuxt第一 ...
- 电子计算机行业爆品打造,二类电商|爆品打造,不是你想造就能造
本文来源:大串想 在商界,几乎 没有哪一个厂家.没有哪一个经销商不想打造爆品,打造爆品的好处实在太多了. 一.爆品决定江湖地位 1. 手握爆品,特别是独一无二,甚至是遥遥领先于友商的爆品,成为行业细分 ...
- 拼购电商不是团购,但扎的的却是三四五线城市老百姓的心
文 |黄信鹏 来源 | 潇湘财经(XiaoxiangFin) 就在淘宝联合支付宝上线拼团功能后第二天,苏宁"88拼购日"宣布订单突破500万-除此之外,京东.网易等电商平台也在拼购 ...
- 项目二《品优购电商网站》
项目二 <品优购电商项目开发> 文章目录 项目二 <品优购电商项目开发> 前言 一.网站 favicon 图标 制作favicon图标 二.TDK三大标签SEO优化 SEO T ...
- HTML5期末大作业:商城页面——仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成...
HTML5期末大作业:商城页面--仿优分购电商静态网页(7个页面) HTML+CSS+JavaScript 电商购物网页HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成 临近期末, 你 ...
- 易购数码类电商商城网页设计与实现项目源码
前些天发现了一个巨牛的人工智能学习电子书,通俗易懂,风趣幽默,无广告,忍不住分享一下给大家.(点击跳转人工智能学习资料) 微信公众号:创享日记 发送:易购网站 获取完整报告论文+源码等 一.系统流程设 ...
- 睿乐购电商课程设计——总结
睿乐购电商课程设计--总结 项目文件目录说明 命名说明与注意事项 ajax参考 问题记录 jquery 获取表单数据 前后端分离方案 session与cookie token 参考代码 接口注意事项 ...
- 导购电商成虎头蛇尾,真的不只是因为拼多多
文 |黄信鹏 来源 | 潇湘财经(XiaoxiangFin) 一周前,拼多多创始人黄峥坐不住了,突然现身媒体沟通会来"坦诚沟通"目前平台愈演愈烈的负面舆论.从零到IPO只用了34个 ...
最新文章
- 四种DCOM错误的区别,0x80080005 0x800706be 0x80010105 0x
- MYSQL一主多从配置
- python 语言-python是一门什么样的语言?
- Oracle 实例崩溃恢复原理剖析 -- 检查点队列的作用与意义
- VTK:Utilities之DiscretizableColorTransferFunction
- 排序算法以及基本数据结构
- 创建MyFilter1类过滤器,对于未登陆用户(如果session对象中包含用户名就认为已登录)进行过滤跳转到登录页面
- pandas 学习(五)—— datetime(日期)
- fastdfs集群搭建_领课教育开源系统-FastDFS的安装和使用
- PageHelper分页插件踩坑--最后一页查询效率低下
- 创翼软件linux版本,电信创翼客户端下载
- 不要迷恋我,虽然我利用Python来耍植物大战僵尸,威力加强版
- 糖果(2019第十届蓝桥杯省赛C++A组I题) 解题报告(状压dp) Apare_xzc
- 题1000、1001、1002
- Word2016替换文字方法
- ubuntu openpn 客户端连接
- *【CodeForces - 768B】Code For 1 (分治策略,模拟二分思想,模拟线段树思想)
- Redis详解-更新中
- 【kali】安装谷歌游览器
- rtx2060为什么叫智商卡_二哈拆家,却把自己卡在了沙发里,智商确实令人捉急...
热门文章
- 来自CSDN的精华网址
- pythonrender函数_Render函数
- 垂钓之王hd_它的专业人士指南,以阻止网络钓鱼
- 2022 CCF BDCI数字经济创新应用案例大赛决赛晋级名单
- 小红书购物笔记在哪里看?
- 三种CRC16 C语言算法理解(CCITT)
- 厦门大学 好导师 计算机,厦门大学信息科学与技术学院计算机科学系导师介绍:程明...
- 服务器虚拟化太金苹果效果好,《我的世界》金苹果更新速度太快,如今附魔金苹果“可遇不可求”...
- win10自带输入法突然变成了繁体,輸入法怎麼成繁體了?
- vue3之语法糖script setup的父子组件、兄弟组件传值