前端html和css的一些命名规范

ゝ一纸荒年。 2022-01-10 06:59 354阅读 0赞

## 1.HTML ##

**原则**

1.规范 。保证您的代码规范，保证结构表现行为相互分离。

2.简洁。保证代码的最简化，避免多余的空格、空行，保持代码的语义化，尽量使用具有语义的元素，避免使用样式属性和行为属性。任何时候都要用尽量简单、尽量少的元素解决问题。

3.实用。遵循标准，但是不能以牺牲实用性为代价。

4.忠诚。选择一套规范，然后始终遵循。不管代码由多少人参与，都应该看起来像一个人写的一样。

**语法**

1.小写. html标签、属性全部小写。

2.嵌套. 所有元素必须正确嵌套。

3.闭合. 双标签必须闭合，单标签（自关闭标签）不闭合 如<hr>,

4.双引号. 双引号属性值，不要使用单引号。

**注释**

1.详尽注释。解释代码解决问题、解决思路等。

2.模块注释。建议不使用模块结束注释。

**文档**

1.文档类型使用html5标准文档类型，文档类型声明之前，不允许出现任何非空字符。不允许添加强制改变文档模式。

2.html元素上指定lang属性。显示页面语言，有助于语言合成工具来确定怎样发音，以及翻译工具决定使用的规则，等等。

3.指定明确的字符编码。让浏览器轻松、快速的确定适合网页内容的渲染方式。

**属性**

1.双引号属性值，不要使用单引号。

2.省略type属性。使用style、link、script，不用指定type属性，因为 text/css 和 text/javascript 分别是他们的默认值。

3.省略Boolean属性值。Boolean属性不用添加取值，disabled,checked,selected等。

4.省略url类属性资源协议头。

5.属性顺序。html属性应该按照特定的顺序出现以保证易读性。class->id,name->data-\*->src,for,type,href->title,alt->aria-\*,role。

6.多媒体元素添加替代属性。图像增加alt属性，音视频增加替代文字。

**元素**

1.避免冗余标签。

2.避免JS生成标签。

3.段落文字应该用p，避免使用br。

4.列表项放ul,ol,dl,不要使用一系列的div或p。

5.input使用for属性绑定label。

6.使label标签包裹radio或checkbox和他们的文字，不用再使用for属性。

7.form button应制定type类型，使用type="submit"、type="reset"或type="button"。

# 2、CSS #

**样式文件命名**

全局：global.css,全局样式为全站公用，为页面样式基础，页面中必须包含；

结构：layout.css页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中；

私有：style.css独立页面所使用的样式文件，页面中必须包含；

模块：module.css产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用；

主题：themes.css实现换肤功能时应用；

补丁：mend.css 基于以上样式进行的私有化修补；

主要的 master.css；

基本共用 base.css

专栏 columns.css；

文字 font.css；

表单 forms.css；

打印 print.css；

**常用的css命名规则**

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

状态：status

投票：vote

合作伙伴：partner

**注释的写法:**

/\* Footer \*/

内容区

/\* End Footer \*/

**id的命名:**

(1)页面结构容器: container；页头：header；内容：content/container；页面主体：main；页尾：footer；导航：nav；侧栏：sidebar；栏目：column；页面外围控制整体布局宽度：wrapper；左右中：left right center；

(2)导航：

导航：nav；主导航：mainbav；子导航：subnav；顶导航：topnav；边导航：sidebar；左导航：leftsidebar；右导航：rightsidebar；菜单：menu；子菜单：submenu；标题: title；摘要: summary；

(3)功能

标志：logo；广告：banner；登陆：login；登录条：loginbar；注册：regsiter；搜索：search；功能区：shop；标题：title；加入：joinus；状态：status；按钮：btn；滚动：scroll；标签页：tab；文章列表：list；提示信息：msg；当前的: current；小技巧：tips；图标: icon；注释：note；指南：guild；服务：service；热点：hot；新闻：news；下载：download；投票：vote；合作伙伴：partner；友情链接：link；版权：copyright；

**class的命名:**

(1)颜色:使用颜色的名称或者16进制代码,如.red \{ color: red; \}.f60 \{ color: \#f60; \}.ff8600 \{ color: \#ff8600; \}

（2）字体大小,直接使用”font+字体大小”作为名称,如.font12px \{ font-size: 12px; \}.font9pt \{font-size: 9pt; \}

(3)对齐样式,使用对齐目标的英文名称,如.left \{ float:left; \}.bottom \{ float:bottom; \}

(4)标题栏样式,使用”类别+功能”的方式命名,如.barnews \{ \}.barproduct \{ \}

**注意事项:**

1.一律小写;

2.尽量用英文；

3.不加中杠和下划线；

4.尽量不缩写，除非一看就明白的单词；

转载于:https://juejin.im/post/5a332b246fb9a045167d3acb