HTML与CSS规范

2023-05-08 15:47 由战立标发表于 #前端开发

此规范主要实现目标：代码一致性和最佳实践.降低代码的成本同时改善多人协作的效率。同时遵守最佳实践，确保页面得到最佳优化和高效代码。

命名规则

项目命名全部采用小写方式，以下划线分隔。 例如:my_project_name
目录命名参照项目命名规则 常用css/images/js/styles
JS文件命名参照项目命名规则 例如 account_check.js
CSS文件命名参照项目命名规则 例如 index_footer.css

HTML编码规范

基本原则

文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

字符编码

以无 BOM 的 utf-8 编码作为文件格式
指定字符编码的 meta 必须是 head 的第一个直接子元素

......

IE兼容模式

优先使用最新版本的IE 和 Chrome 内核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化

SEO处理方便客户进行网站推广和优化，必须是前端开发人员必须重点处理

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO 相关信息-->
    <title>网站标题</title>
    <meta name="keywords" content="关键字">
    <meta name="description" content="描述">
</head>

viewport

viewport:一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容
width: 浏览器宽度，输出设备中的页面可见区域宽度
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度
initial-scale: 初始缩放比例
maximum-scale: 最大缩放比例

为移动端设备优化，设置可见区域的宽度和初始缩放比例 <meta name="viewport" content="width=device-width, initial-scale=1.0">

IOS图标

apple-touch-icon 图片自动处理成圆角和高光等效果;
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图可参考如下:

推荐的HEAD模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>标题</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="关键字">
    <meta name="author" content="其他相关信息">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
</head>

命名规则

[强��] class须单词全字母小写，单词间以- 分隔
[强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名示例:

(去掉'-')
[强制] 元素 id 必须保证页面唯一。
[建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。
[建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。示例:

CSS编码规范

基本原则

文件编码

CSS文件使用无 BOM 的 UTF-8 编码

空格

[强制] 选择器 与 { 之间必须包含空格示例:

.selector {
}

属性

[强制] 属性定义必须另起一行。

示例:

<!-- good -->
.selector {
    margin: 0;
    padding: 0;
}

<!-- bad -->
.selector { margin: 0; padding: 0; }

[强制] 属性定义后必须以分号结尾。示例:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

属性书写顺序

[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性。解释:

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等

Box Model 相关属性包括：border / margin / padding / width / height 等

Typographic 相关属性包括：font / line-height / text-align / word-wrap 等

Visual 相关属性包括：background / color / transition / list-style 等

示例:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
}

清除浮动

[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。解释：触发 BFC 的方式很多，常见的有： + float 非 none + position 非 static + overflow 非 visible

如希望使用更小副作用的清除浮动方法，参见 [A new micro clearfix hack][1] 一文。另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。

!important

[建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。解释：必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。

文字

[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。解释: 所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

![常见Family Name][2]

示例:

h1 {
    font-family: "Microsoft YaHei";
}

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。解释: 由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

[强制] font-weight 属性必须使用数值方式描述。解释: + CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。 + 浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

[建议] line-height 在定义文本段落时，应使用数值

解释: + 将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。 + 当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

开发总结

1.在页面中有相关文章或详情的布局中，必须提前写入 <a href="#"></a>。 2.美工在设计过程中，通常在考虑<ul><li>,<table><tr>,<select><option>等操作时，为后台进行遍历操作提供方便。同时尽量在注释中说明某些属性的作用。示例:

<style>
    .item {
        height:20px;
        line-height:20px
    }
    .current {
        color:red
    }
</style>
<ul>
    <!--默认第一个使用current来进行高亮显示-->
    <li class="current item">导航1</li>
    <li class="item">导航2</li>
    <li class="item">导航3</li>
    <li class="item">导航4</li>
</ul>

3.公用头部与页脚规范。在美工设计页面时，要考虑后模板页提取方便。通常将常用的头部和页脚进行统一处理。避免在头部和页脚引入其他部分造成耦合，不利于后台对页面进行拆分。

1.通常头部一般包括导航条、顶部二维码、联系电话 2.尾部包括友情链接、底部新闻导航、关于我们等信息 3.通常只有在首页使用的banner焦点图，广告图不允许放入到头部

4.多个栏目遍历时候，尽量避免出现要计算折行的问题。示例:

<!--尽量不要出现这种布局-->
<table>
    <tr>
        <td>栏目1</td>
        <td>栏目2</td>
    </tr>
    <tr>
        <td>栏目3</td>
        <td>栏目4</td>
    </tr>
</table>

<!--推荐布局-->
<table>
    <tr>
        <td>栏目1</td>
        <td>栏目2</td>
        <td>栏目3</td>
        <td>栏目4</td>
    </tr>
</table>

5.使用基本清除样式reset.css文件。可参考 [网易css reset重置样式][3]

包括常见的margin,padding,a(text-decoration,color)等。

6.注释。CSS注释需要分块说明每段的作用。HTML需要注释说明每段大体的功能与作用。示例:

<!--推荐注释-->

<!--这里是焦点图-->
<div id="banner">
    <img src=""/>
    <img src=""/>
</div>
<!--焦点图 end -->

<!--页脚 包括友情链接等信息-->
<div id="footer">
    <a href="">链接1</a>
    <a href="">链接2</a>
</div>
<!--页脚 end -->

<style>
/*焦点图样式*/
#banner {
    width:120px;
    height:200px;
    color:#fff;
}

/*页脚样式*/
#footer {
    color:#f0f0f0;
    font-size:12px;
}
</style>