美文网首页
coding_guide

coding_guide

作者: VicSong | 来源:发表于2021-05-25 12:07 被阅读0次

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

  • Android

    • Android /10.0/11.0
      • Google Chrome

  • 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；

1.4. Javascript规范

1.5. Wordpress规范

相关文章

  • coding_guide

    1. Coding指南 本规范的目的是提高制作效率和项目质量，统一前端人员的编码规范。 1.1. 基本规则 1.1...

网友评论

      本文标题：coding_guide

      本文链接：https://www.haomeiwen.com/subject/siiqsltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|coding_guide|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！