ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

11.类名命名规范

2021-07-21 23:34:06  阅读:291  来源: 互联网

标签:11 常用 列表 ClassName 文件夹 命名 类名


目录

命名规范

目录命名

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,常用,列表,ClassName,文件夹,命名,类名
来源: https://blog.csdn.net/lazylYYY/article/details/118978112

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有