1. Coding指南
本规范的目的是提高制作效率和项目质量，统一前端人员的编码规范。
1.1. 基本规则
1.1.1. 站点目录结构及说明
├ [css]--------------------：站点所有的CSS文件
│ └ common----------------: 公共CSS文件
│ └ layout.css---------：初始化样式(Default style)和公共部分的样式表
│ └ general.css--------：共用CSS样式表(General style)
│ └ index.css-------------：首页(index)的样式表
├ [img]--------------------：站点所有的图片
│ ├ [common]--------------：站点公共部分使用的图片，例如页眉和页脚
│ ├ [index]---------------：仅在首页(index)中使用的图片
├ [js]---------------------：站点所有的JavaScript文件
│ ├ [jquery.js]-----------：JQuery文件
│ └ [common.js]-----------：放公共JS例如pagetop滑动等
│ └ [head.js]-------------：放viewport声明
├ [jpg]--------------------：放对照设计稿(提交项目时要删除)
└ [index.html]-------------：首页
1.1.2. 文件命名规范
- 命名用半角、大小写英文、数字以及下划线"_"或中杠"-"；
- 用简短、明了的英文来命名；
- 文件命名两个标识符之间通常用"_"，很少用"-"；
- 文件名里不能有空格、特殊符号等；
- 使用序号时，数字放在后缀名的前面，数字前不能使用“_”和“-”，例：popup01.html；
1.1.3. ID/CLASS命名规范
- 驼峰规则：
两个标识符第二个标识符首字母大写，例如：id="globalNavi",#globalNavi； - 只能使用半角的英文、数字，没有其他字符；
- 第一个字母不能使用数字；
1.1.3.1. 常用ID名一览
ID具有唯一性
| 语义 | 命名 |
|---|---|
| 容器 | #container |
| 页眉 | #gHeader(globalHeader) |
| 导航 | #gNavi(globalNavi) |
| 主栏 | #main |
| 内容 | #conts(contents) |
| 侧边栏 | #sideBar |
| 页脚 | #gFooter |
| 页面路径 | #pagePath |
1.1.3.2. 常用CLASS名一览
公共模块常用CLASS
| 语义 | 命名 |
|---|---|
| 内部的 | .inner |
| LOGO | .logo |
| 子导航 | .subNavi |
| 局部导航 | .localNavi |
| 页面指南 | .pageGuide |
| 版权 | .copyright |
布局模块常用CLASS
| 语义 | 命名 |
|---|---|
| 盒子 | .box |
| 子盒子 | .subBox |
| 图文混排 | .imgBox |
| 图文混排里图片DIV | .photoBox |
| 图文混排里文字DIV | .textBox |
| 新闻盒子 | .newsBox |
| 新闻列表 | .newsList |
| 新闻详细 | .newsDetail |
| 广告 | .banner |
| 按钮 | .btn |
| 列表 | .list |
| 列表详细 | .listDetail |
| 链接 | .link |
| 列表链接 | .listLink |
| 菜单 | .menu |
| 提示 | .tips |
1.1.4. 图片命名规范
图片的命名跟对应的部位（ID/CLASS、标签）和图片种类、用途相关联，两个标识符之间用 "_"连接，序号前的下划线可以省略。
基本的命名规则：
「"部位名"+"_"+"标识符"+"序号"」
「"用途・种类名"+"_"+"标识符"+"序号"」
- 部位名: 图像所用的场所（ID/CLASS、标签等）例如：main_img.jpg,footer_img.png
- 用途・种类名: 标题、按钮、广告、图像等，例如：h2_img01.png，btn01.png,banner01.png，photo01.jpg
- 序号：由连续的两位数字构成
另外，根据图像鼠标效果，图片命名的方式是在图像后面加后缀如下所示：
- _over ---- mouseover状态,例：btn_over.png
- _out ---- mouseout状态,例：btn_out.png
- _on ---- 当前页状态,例：btn_on.png
用途・种类名实例：
[标题]
h2_img01.png
h2_img02.png
h2_bg01.png
h3_img01.png
h4_img01.png
[文本图片]
img_text01.png
img_text02.png
[广告]
banner01.jpg
banner02.jpg
[按钮]
btn01.png
[图标]
icon01.png
icon02.png
[背景]
news_bg01.jpg
h2_bg01.png
[写真]
photo01.jpg
photo02.jpg
[图表、图形]
graph01.png
graph02.png
[未知图片]
img01.png
img02.jpg
[LOGO]
logo01.png
logo02.png
[导航]
g_navi01.png
s_navi01.png
1.1.5. 图片格式要求
要根据图片的种类来选择择合适的图片格式。
1.1.5.1. JPEG图片要求
切图规则：
- 色彩丰富、含有渐变的图像使用jpg格式，例如产品、广告、风景、人物肖像等
没有特别指定的情况下，请使用以下的压缩率导出jpg图像
Photoshop ---- 100%；
1.1.5.2. PNG-32/24/8图片要求
切图规则：
- PNG-32 ------ 背景透明的图片；
- PNG-24 ------ 最多支持 1600 万+ 种颜色；（基本不用）
- PNG-8 ------- 最多支持256种颜色，例：标题，btn，icon，文本图片等;
photoshop 导出的 png24透明，其实是 png32透明。
1.1.5.3. GIF图片要求
- 仅用于gif动图
1.1.6. 浏览器检查
除项目要求外，将以下浏览器作为最低限度的检查对象。
-
Windows10
- Firefox 最新版
- Google Chrome 最新版
- Internet Explorer 11/Edge
-
Mac
- Safari 最新版
- Firefox 最新版
- Google Chrome 最新版
-
iPhone
- iOS /13/14
- Google Chrome
- Safari
- iOS /13/14
-
Android
- Android /10.0/11.0
- Google Chrome
- Android /10.0/11.0
-
iPad
- iOS 13/14
1.1.6.1. 检查工具
使用下述工具进行编码检查,尽可能修正所有错误和警告。
- Web Developer（Firefox插件）:可以检查alt属性等；
- Html Validator（Firefox插件）：HTML语法验证工具；
- HTML-lint：修正重要度4以上的错误。
- W3C Markup Validation Service
1.1.6.1.1. 仙台项目检查
- HTML Coding Checker
- PerfectPixel by WellDoneCode
- headingsMap
- Alt & Meta viewer
- ETA SEO inspector
1.2. HTML编码规范
1.2.1. HTML5定义标准(默认标准)
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="css/common/layout.css">
<link rel="stylesheet" type="text/css" href="css/common/general.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/head.js"></script>
</head>
<body>
<div id="container">
<header id="gHeader">
<h1></h1>
</header>
<div id="main">
<section class="company">
<h2></h2>
</section>
<section class="about">
<h2></h2>
</section>
<section class="content">
<div id="conts"></div>
<aside id="sideBar"></aside>
</section>
</div>
<footer id="gFooter"> </footer>
</div>
<script src="js/jquery.js"></script>
<script src="js/common.js"></script>
</body>
</html>
※ jquery.js放在底部
※ common.js里面
1.2.2. 字符编码
采用UTF-8。
Unicode BOM 浏览器不能识别，不要加。
1.2.3. 路径说明
没有特别的指定，默认用相对路径。
<h1><a href="../"><img src="../image/h1_img.jpg" alt="LOGO"></a></h1>
<nav id="gNavi">
<ul>
<li><a href="../products/detail.html">Product</a></li>
</ul>
</nav>
1.2.4. 模板部位的管理
- DW Library（默认）
- DW template
- Include SSI
- Include PHP
1.2.5. Title的格式说明
标题的书写顺序为：
页面名称页面标题+所属大结构+网站名称。之间用全角竖线"｜"区分。
页面名称｜大结构｜网站名称
页面名称｜网站名称
「半角空格＋半角竖线＋半角空格」也可以，但是考虑到编码时的负荷和防止错误，还是采用全角竖线最好。
==title内容通常按照式样书添加，默认为空==
1.2.6. PagePath的格式说明
PagePath格式与Title类似，如下：
首页 > 二级页面首页 > 三级页面 > 页面名
==PagePath内容按照设计稿来==
1.2.7. 图片标签的说明
- 所有图片标签必须得有alt属性，并且要赋相应的值。即使不知道alt属性也应指定如（alt=””）。
1.2.8. 注释标记的说明
为了易于阅读，适当地插入注释标记,要将注释的开始和结束插入需要说明的地方。
<!-- wrap -->
<div class="wrap">
</div>
<!-- /wrap -->
1.2.9. 标签缩进说明
html标签要根据每个部分，适当的换行和Tab缩进，这样代码易于阅读。
<div>
<p>テキストテキストテキストテキストテキスト</p>
<ul>
<li>リストの内容</li>
<li>リストの内容</li>
<li>リストの内容</li>
</ul>
</div>
1.2.10. 书写规则（概要）
- 避免出现乱码，原则上禁止使用半角片假名；
- 为了避免乱码，禁止使用特殊文字，罗马数字可以使用I和V的组合等替代方式来表示；
例）×① Ⅳ ○（1）IV - 英文字母和数字统一使用半角；
例）×ＡＢＣ１２３
○ABC123 - 间隔号「・」统一使用全角；
- 冒号「：」统一使用全角；
- 小括号（）统一使用全角；
※使用半角字符时，字符前后都要有一个半角空格。
1.2.11. 其它通用规则
- 元素名、属性名一律使用小写字母表述；
- 属性值加双引号；
- 标记要关闭；
- 为防止垃圾邮件，邮件地址请使用6进制加密；
- 外部链接加新窗口打开属性；
- 站点多余文件删除；
- 代码格式化；
1.3. CSS编码规范
1.3.1. CSS文件外部方式导入
<link rel="stylesheet" type="text/css" href="css/index.css">
1.3.2. CSS media区间分界点
- SP分界点
@media all and (max-width: 896px) {
}
- PC分界点
@media all and (min-width: 897px) {
.sp {
}
}
- iPad分界点
@media (min-width: 768px) and (max-width: 1024px) {
}
这时候SP的分界点为：
@media all and (max-width: 767px) {
}
1.3.3. CSS语法格式
单一样式的书写格式
.text {
color: #fff;
font-size: 1.4rem;
}
多个样式的书写格式
.text {
color: #fff;
font-size: 1.4rem;
}
.inner {
color: #000;
font-size: 1.5rem;
}
多样式合并的书写格式
.text01,
.text02,
.text03 {
color: #fff;
font-size: 1.4rem;
}
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格
- 每行只能写一个属性；
- 属性都要Tab缩进；
- 属性语句以分号";"结尾；
- 属性名和":"之间不能有空格，“:”后需要一个半角空格；
- 右花括号的前后不能有空格或Tab；
- 不要有多余的空行；
1.3.4. 注释方式
注释的书写使用下列格式
/*-----------------------------------------------
[大结构名]
-----------------------------------------------*/
/*----- 小结构名 -----*/
例：
/*-----------------------------------------------------------
ヘッダー
------------------------------------------------------------*/
#gHeader {
}
/*----- mainvisual -----*/
#main .mainvisual {
}
1.3.5. 属性的规范使用
×）不规范
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;
○）规范
margin: 10px 15px 20px 15px;
1.3.6. CSS书写顺序
.css {
margin:
padding:
width:
max-width:
min-width:
height:
max-height:
min-height:
display:
float:
flex:
flex-wrap:
justify-content:
align-items:
position:
top:
left:
color:
font-family:
font-size:
font-style:
font-weight:
line-height:
letter-spacing:
text-align:
vertical-align:
border-radius:
border:
box-shadow:
box-sizing:
background: url() no-repeat center center / 500px auto;
background-image:
background-color:
background-size:
background-position:
background-repeat:
cursor:
content:
opacity:
overflow:
transform:
transition:
visibility:
z-index:
}
1.3.7. 其他通用规则
- 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
- 对于属性值，省略小于 1 的小数前面的 0 （例如，.5s 代替 0.5s；-.5px 代替 -0.5px）;
- 文字大小单位请不要指定绝对值，除非指定，默认用rem；
- css颜色使用16进制、小写的6位数表述例如：#f0f0f0;
- css尽量使用简写形式，例：#fffff 简写#fff；
