前端命名技巧

命名规范

1.所有命名都使用英文小写
推荐:<div class="main"></div>

不推荐: <div class="Main"></div>

2.命名用引号包裹
推荐:<div id="header"></div>

不推荐: <div id=header></div>

3.用中横线连接
推荐:<div class="mod-modal"></div>

不推荐: <div class="modModal"></div>

4.命名太长可适当简化
推荐: <div class="carousel-ct">

不太推荐: <div class="carousel-container">

5.命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)
推荐:<div class="text-lesser"></div>

不推荐: <div class="light-grey"></div>

命名经验

wrap – 用于外侧包裹
header或者 head– 用于头部
main– 用于主体
container或 ct– 包裹容器
aside – 用于侧边栏
nav– 用于导航条
tab– 用于Tab切换选项卡
content– 和header footer 对应,用于主要内容
footer或者foot– 用于尾部
ad– 广告
subnav– 二级导航
menu– 菜单
tag– 标签
message或者notice– 提示消息
summary– 摘要
logo– logo
search– 搜索框
login– 登录
register– 注册
username– 用户名
password – 密码
dropmenu – 下拉菜单
banner – 广告条
copyright – 版权
modal或者 dialog – 弹窗
tooltip – 鼠标放置上去的提示
摘抄自若愚老师博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:s...
    王小傲阅读 1,538评论 0 9
  • CSS命名规则 头:header内容:content/containe尾:footer导航:nav侧栏:sideb...
    纹小艾阅读 774评论 0 9
  • html页面的CSS、DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾...
    xiaoaiai阅读 1,098评论 0 1
  • 一直很羡慕能写出一手好文章的人,比如一位相识的姐姐,她不仅新闻稿件写的得心应手,散文和小说写的更是一级棒,在我眼...
    蜗牛跑跑阅读 468评论 5 8
  • 今日与合作方谈得比较好,就关键问题是利润怎么分配、标前信任问题,这两个问题我相信应该有办法可以解决。 目前最大的关...
    郭敏缓阅读 225评论 0 0

友情链接更多精彩内容