北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 关于class命名的一些知识点

时间: 来源:火星人

在我们进行前端开发时,经常会使用css根据元素的class操作元素属性,但是为了页面的语义化我们需要使用更加规范的class名,今天就给大家介绍一下html的class命名规范和常用命名


一、命名规则说明:

1、所有的命名最好都小写,如果要使用多词语组合各个词语之间用-或者_字符连接
2、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4、空元素要有结束的tag或于开始的tag后加上"/"
5、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6、尽量使用英文命名原则
7、尽量不缩写,除非一看就明白的单词
8、类名的第一个字符不能使用数字!
9、规避class与id相同命名,容易引起混淆,特别是在多人开发时
10、取父级元素id/class命名部分命名,提高可读性
11、css属性书写顺序, 建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起
12、书写css代码前, 考虑并提高样式重复使用率,尽量以最少的代码实现最好的效果
13、充分利用html自身属性及样式继承原理减少代码量
14、尽量使用形象的而不是形容的来命名类名,比如要设置一个红色字体的类名, warning就比red更形象,形象的类名可以提高类名泛用性,增加它的使用范围


二、常用class名

外套 wrap/wrapper ------------------用于最外层/页面外围控制整体布局宽度
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
侧栏sidebar -----------侧边栏
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
菜单 menu -----------------用于菜单
子菜单 submenu -----------------用于子菜单
标题 title -----------------用于标题
摘要 summary -----------------用于摘要
标志 logo -----------------网站logo
大广告 banner -----------------用于广告,滚动广告
面包屑breadcrumb -----------------面包屑导航
登陆 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,比如class-name,class-neme--small他代表在class-neme的基础上再做设置,因为在团队合作中class名很容易出现重复,所以在类名中加入识别是有必要的,列如za-class-neme--small,用z来声明成员,a为成员编码

关键词:北京web前端培训,北京前端工程师培训,北京web培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号