web前端规范（前端标准规范）

网友投稿 249 2022-06-12


1. 规范说明

此为前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性。

此规范为参考规范，不全是硬性要求，部分硬性约定见下一条书写规范，统一团队编码规范和风格。让所有代码都是有规可循的，并且能够得到沉淀，减少重复劳动。

1.1 结构说明

-- 项目结构

----|---- CSS文件结构

----|---- JS文件结构

2. 书写规范

2.1 样式与内容分离

2.1.1 项目结构

---

|---- index.html 入口页

|---- js/ JS //具体见JS细化结构

|---- css/ CSS //具体见CSS细化结构

2.1.2 重构步骤约定

index.html全部样式附着于class="xxx"注： 此时文件中不包含任何一个 id="xxx"

为上一步书写 CSS style

[至此重构完成]

开始书写js交互文件，使用ID和Class定位被操作句柄

向index.html中需要的地方添加id="xxx"及data-xxx="xxx"

[至此交互效果完成]

2.1.3 命名规范

文件及文件夹: 全部英文小写字母+数字或连接符"-,_"，不可出现其他字符

如：../css/style.css, jquery.1.x.x.js

文件：调用/libs文件需包含版本号，压缩文件需包含min关键词，其他插件则可不包含

如：/libs/jquery.1.9.1.js/libs/modernizr-1.7.min.jsfileuploader.jsplugins.js

ID: 匈牙利命名法 & 小駝峰式命名法

如：firstNametopBoxListfooterCopyright

Class: [减号连接符]

如：top-itemmain-boxbox-list-item-1

尽量使用语义明确的单词命名，避免leftbottom等方位性的词语

2.1.4 格式&编码

文本文件：.xxxUTF-8(无BOM) 编码

图片文件：.png(PNG-24) .jpg(压缩率8-12)

动态图片：.gif

压缩文件：.tar.gz.zip

2.2 CSS 细化规范

2.2.1 CSS 文件结构

--- ../css/

|---- css/libs/reset.css CSS reset文件

|---- … …

|---- css/images/ 主 CSS-sprite 图片

|---- css/style.css 主 CSS 样式表

|---- … …

|---- css/images/xxx/sprite.png xxx 的 CSS-sprite 图片

|---- css/xxx-style.css xxx 的 样式表

2.2.2 CSS(含Less) 文件结构

--- ../css/

|---- css/libs/reset.less CSS reset文件

|---- css/libs/elements.less Less 函数复用文件

|---- … …

|---- css/images/ 主 CSS-sprite 图片

|---- css/style.less 主样式Less

|---- css/style.css less -> css 自动生成

|---- … …

|---- css/images/xxx/sprite.png xxx 的 CSS-sprite 图片

|---- css/xxx-style.less xxx 的 Less

|---- css/xxx-style.css less -> css 自动生成

2.2.3 使用Less

在.less文件头部引入 reset.less & elements.less，之后调用如下属性传参即可，具体使用说明见 -> Lesselements 官方文档

@import "libs/reset.less";

@import "libs/elements.less";

.gradient

.bw-gradient

.bordered

.drop-shadow

.rounded

.border-radius

.opacity

.transition-duration

.rotation

.scale

.transition

.inner-shadow

.box-shadow

.columns

.translate

2.2.4 CSS reset

CSS reset 文件使用：reset.css 或 reset.less

reset文件用于重设各个浏览器的默认样式方案，解决其引起的耦合问题。

也可使用.clearfix清除浮动

2.2.5 CSS 注释格式约定

/*

@name: Drop Down Menu

@description: Style of top bar drop down menu.

@require: reset.css

@author: Andy Huang(andyahung@geekpark.net)

*/

其中，@require为可选项

CSS换行制表：使用 2 或4 个空格，而非[Tab]

书写格式：

CSS名称+冒号+属性

如：.box1 {float:left;}

建议保留{左侧空格，字体名用\包含

如：.box1,.box2,.box3 {font-family:Courier,'Courier New';}

避免中文，或使用转义，推荐前者

如：font-family: "Microsoft YaHei";font-family:\5fae\8f6f\96c5\9ed1;

2.2.6 CSS各属性的排列顺序：不做硬性要求

如：以下2种顺序均可

.box {

/* 顺序1 */

background: none repeat scroll 0 0 transparent;

bottom: 11px;

position: relative;

width: 22px;

z-index: 33;

}

.box {

/* 顺序2 */

z-index: 33;

width: 22px;

bottom: 11px;

background: transparent none repeat scroll 0 0 ;

position: relative;

}

2.2.7 CSS嵌套规则

/* 推荐嵌套层级 */

.ui-icon-rarr{}

.ui-icon-larr{}

.ui-title{}

.ui-nav .ui-list{}

.ui-table .ui-list{}

/* 不推荐 */

.ui-icon-rarr{}

.ui-icon-larr{}

.ui-title{}

.ui-list{}

.ui-nav{}

2.2.8 CSS格式化

勿格式化，保留下面这种格式，增加可读性和可维护性，后期后台程序(如：PHP/Python)会将CSS压缩成 一行 输出：

.box{

/* 勿格式化，增加可读性 */

background: none repeat scroll 0 0 transparent;

bottom: 11px;

position: relative;

width: 22px;

z-index: 33;

}

2.3 XHTML 细化规范

2.3.1 HTML 注释格式约定

HTML换行缩进：采用 2 空格

2.3.2 HTML嵌套规则

/* 推荐嵌套层级 */

标签：api
上一篇:浏览器 HTTP 缓存原理分析（浏览器网页版入口）
下一篇:中小型网站架构分析及优化（大型网站架构设计）
相关文章

 发表评论

暂时没有评论，来抢沙发吧~