11.类名命名规范

2021/7/21 23:36:02

本文主要是介绍11.类名命名规范,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

命名规范

目录命名

ClassName命名


命名规范

由历史原因及个人习惯引起的 DOM 结构、命名不统一,导致不同成员在维护同一页面时,效率低下,迭代、维护成本极高。

目录命名

  • 项目文件夹:shoping

  • 样式文件夹:css

  • 脚本文件夹:js

  • 样式类图片文件夹:img

  • 产品类图片文件夹: upload

  • 字体类文件夹: fonts

ClassName命名

ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接

.nav_top

常用命名推荐

注意:ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName,因为有些浏览器插件(Chrome的广告拦截插件等)会直接过滤这些类名,因此

<div class="ad"></div>

这种广告的英文或拼音类名不应该出现

另外,敏感不和谐字眼也不应该出现,如:

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div> 
<div class="ass"></div> 
<div class="KMT"></div> 
...

ClassName含义
about关于
account账户
arrow箭头图标
article文章
aside边栏
audio音频
avatar头像
bg,background背景
bar栏(工具类)
branding品牌化
crumb,breadcrumbs面包屑
btn,button按钮
caption标题,说明
category分类
chart图表
clearfix清除浮动
close关闭
col,column
comment评论
community社区
container容器
content内容
copyright版权
current当前态,选中态
default默认
description描述
details细节
disabled不可用
entry文章,博文
error错误
even偶数,常用于多行列表或表格中
fail失败(提示)
feature专题
fewer收起
field用于表单的输入区域
figure
filter筛选
first第一个,常用于列表中
footer页脚
forum论坛
gallery画廊
group模块,清除浮动
header页头
help帮助
hide隐藏
hightlight高亮
home主页
icon图标
info,information信息
last最后一个,常用于列表中
links链接
login登录
logout退出
logo标志
main主体
menu菜单
meta作者、更新时间等信息栏,一般位于标题之下
module模块
more更多(展开)
msg,message消息
nav,navigation导航
next下一页
nub小块
odd奇数,常用于多行列表或表格中
off鼠标离开
on鼠标移过
output输出
pagination分页
pop,popup弹窗
preview预览
previous上一页
primary主要
progress进度条
promotion促销
rcommd,recommendations推荐
reg,register注册
save保存
search搜索
secondary次要
section区块
selected已选
share分享
show显示
sidebar边栏,侧栏
slide幻灯片,图片切换
sort排序
sub次级的,子级的
submit提交
subscribe订阅
subtitle副标题
success成功(提示)
summary摘要
tab标签页
table表格
txt,text文本
thumbnail缩略图
time时间
tips提示
title标题
video视频
wrap容器,包,一般用于最外层
wrapper容器,包,一般用于最外层


这篇关于11.类名命名规范的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程