前端命名规范以及常用命名整理

简介: 这是一份关于HTML和CSS编码规范的摘要:- 文件编码统一使用UTF-8。- 命名遵循语义化,CSS属性书写规范,推荐使用中线命名法(如`hello-world`),避免下划线和驼峰命名。- 样式应复用,模块化,便于移植。- 避免使用CSS Hack,优先考虑浏览器兼容性。- 针对Firefox设计,用IE条件注释做修正。- 使用英文命名,避免拼音,少用缩写,不以数字开头。- 常见命名包括页面结构(如`container`、`header`)、导航(`nav`、`subnav`)、功能区域(`logo`、`search`)等,提供了一套常见的ID和Class命名约定。

1、基本要求:

1)文件编码统一使用 UTF-8 编码;

2)命名时以符合语义为主要参考指标,CSS属性书写规范,采用统一风格及命名方法;

3)结构清晰,层级关系明朗,以不超过三级为标准;

4)同一表现形式的样式要求可重复利用,模块组件类的样式要求可整体外部移植;

5)编写 CSS 的时候,应当避免使用CSS Hack,能不用则不用。

6)所有页面默认都针对Firefox 等最接近标准的浏览器进行设计,然后使用IE 特有条件注释功能进行针对性修正。

7)请使用英文进行命名,尽量避免使用拼音。命名要求具有可读性,尽量避免使用缩写。命名虽然允许数字,但应尽量避免使用数字命名。

2、命名方法  要求采用统一的命名方法。常用命名方法有:

1)连写式命名法,如:helloworld

2)中线命名法,如:hello-world(目前采用此方法的较多,建议采用)

3)下划线命名法,如:hello_world

4)骆驼命名法,如:helloWorld

5)帕斯卡命名法,如:HelloWorld

6)其他方法。

3、ID及Class命名常用名称

(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

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容(中部)

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

ogo:标记网站logo标志

banner:标语、广告条、顶部广告条

login:登陆,(例如登录表单:form-login)

loginbar:登录条

regsiter:注册

tool、toolbar:工具条

search:搜索

searchbar:搜索条

searchlnput:搜索输入框

shop:功能区,表示现在的

icon:小图标

label:商标

homepage:首页

subpage:二级页面子页面

hot:热门热点

list:文章列表,(例如新闻列表:list-news)

scroll:滚动

tab:标签

sitemap:网站地图

msg 或 message:提示信息

current:当前的

joinus:加入

status:状态

btn:按钮,(例如搜索按钮可写成:btn-search)

tips:小技巧

note:注释

guild:指南

arr、arrow:标记箭头

service:服务

breadcrumb:(即页面所处位置导航提示)

download:下载

vote:投票

siteinfo:网站信息

partner:合作伙伴

link、friendlink:友情链接

copyright:版权信息

siteinfoCredits:信誉

siteinfoLegal:法律信息

登录条:loginBar

标志:logo

侧栏:sideBar

广告:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

友情链接:friendLink

页脚:footer

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

版权:copyRight

相关文章
|
JavaScript 前端开发 搜索推荐
|
1月前
|
前端开发 开发者
【专栏】BEM(Block-Element-Modifier)是一种前端命名规范和架构方法,旨在创建清晰、可维护的代码结构。
【4月更文挑战第29天】BEM(Block-Element-Modifier)是一种前端命名规范和架构方法,旨在创建清晰、可维护的代码结构。它包括Block(独立功能单元)、Element(Block的子元素)和Modifier(表示状态或变体)。BEM的特点包括命名一致性、模块化设计、清晰结构和可复用性,适用于代码组织、样式管理、组件化开发和团队协作。虽然命名较长和学习成本是其局限性,但BEM在提升代码质量和效率方面具有显著优势,是前端开发的重要工具。
|
7月前
|
前端开发 JavaScript 编译器
前端开发规范:命名规范、html规范、css规范、js规范(四)
前端开发规范:命名规范、html规范、css规范、js规范
170 0
|
7月前
|
前端开发 JavaScript
前端开发规范:命名规范、html规范、css规范、js规范(三)
前端开发规范:命名规范、html规范、css规范、js规范
|
7月前
|
数据采集 前端开发 JavaScript
前端开发规范:命名规范、html规范、css规范、js规范(二)
前端开发规范:命名规范、html规范、css规范、js规范
|
7月前
|
移动开发 前端开发 JavaScript
前端开发规范:命名规范、html规范、css规范、js规范(一)
前端开发规范:命名规范、html规范、css规范、js规范
213 0
|
前端开发
前端学习笔记202304学习笔记第六天-props的大小写命名
前端学习笔记202304学习笔记第六天-props的大小写命名
47 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-命名路由的概念和具体用法
前端学习笔记202304学习笔记第十七天-vue3.0-命名路由的概念和具体用法
62 0
|
前端开发
前端学习笔记202304学习笔记第十七天-vue3.0-命名路由的概念和具体用法2
前端学习笔记202304学习笔记第十七天-vue3.0-命名路由的概念和具体用法2
52 0
|
JavaScript 前端开发
前端-vue基础102-命名路由
前端-vue基础102-命名路由
66 0
前端-vue基础102-命名路由