度量快速开发平台-业界最好的全功能软件开发平台

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 部件 流程 SQL
查看: 17|回复: 5

[分享] html与css命名规范小结

[复制链接]

190

主题

2090

帖子

4782

积分

论坛元老

Rank: 8Rank: 8

积分
4782
发表于 2018-2-6 17:48:46 | 显示全部楼层 |阅读模式
一、命名规则说明
  • 所有的命名最好都用小写
  • 使用英文命名
  • 给每一个表格和表单加上一个唯一的、结构标记id
  • 给每个图片加上alt标签,优点在于图片发生错误时,alt可以体现给用户
二、相对网页外层重要部分css样式命名
  • wrap——用于最外层
  • header——用于头部
  • main——用于主题内容(中部)
  • main-left——左侧布局
  • main-right——右侧布局
  • nav——网页菜单导航条
  • content——用于网页中部主体
  • footer——用于底部
css命名其他说明
  • DIV+CSS命名小结:无论是使用“.”选择符号开头命名,还是使用“#”选择符号开头都无所谓,但我们最好遵循——主要的,重要的,特殊的,最外层的盒子用“#”选择符号开头命名,其他都用“.”选择符号开头命名,同时要考虑命名的css选择器在html中尽量不要重复使用调用。
三、类class的书写规范示例
  • 字体大小,直接使用"font+字体大小"作为名称,如:
  • .font16px{ font-size:16px } ;
  • .font18px{ font-size:18px } ;
  • 标题栏样式,使用"类别+功能"的方式命名,如:
  • .barnews{ } ;
  • .barproduct{ } ;
  • 省略0后边的单位,如:
  • margin: 0 ;
  • padding: 0 ;
四、标签属性命名规范
  • id:—— 连接符命名法“hello-world”
  • class:—— 连接符命名法“hello-world”
  • name:—— 骆驼式命名法“helloWorld”
五、注意事项
  • h1~h6:文章标题、内容区块标题,根据重要性由大到小区分,h1一个页面只出现一次
  • 文本框不使用size属性定义宽度,而使用css的width属性
  • 添加maxlength属性限制输入字符的长度
  • 把id留给后台开发和JS使用,除此之外页面的page id(如首页的外层需要一个ID id=”page_index”),页面结构(header main footer)允许用id命名之外,其他禁止id使用在样式表CSS命名中,一律使用class命名
  • 为了节省字节数以及文件大小,尽量使用属性的简写方式
  • 如果颜色使用16进制色值,当6个数字两两相等时,使用缩写方式编写,比如:#996600缩写为#960
六、图片命名
  • 背景图片:bg001,bg002……
  • 一般图片:img001,img002……
  • 特定图片:如icon,logo按照具体情况命名
  • 按钮图片:btn-submit,btn-cancel……

回复

使用道具 举报

190

主题

2090

帖子

4782

积分

论坛元老

Rank: 8Rank: 8

积分
4782
 楼主| 发表于 2018-2-6 17:49:15 | 显示全部楼层
回复 支持 反对

使用道具 举报

190

主题

2090

帖子

4782

积分

论坛元老

Rank: 8Rank: 8

积分
4782
 楼主| 发表于 2018-2-6 17:49:47 | 显示全部楼层
回复 支持 反对

使用道具 举报

532

主题

5809

帖子

1万

积分

作者

Rank: 7Rank: 7Rank: 7

积分
13329
发表于 2018-2-7 14:05:02 | 显示全部楼层
回复 支持 反对

使用道具 举报

190

主题

2090

帖子

4782

积分

论坛元老

Rank: 8Rank: 8

积分
4782
 楼主| 发表于 2018-2-7 17:34:22 | 显示全部楼层
回复 支持 反对

使用道具 举报

190

主题

2090

帖子

4782

积分

论坛元老

Rank: 8Rank: 8

积分
4782
 楼主| 发表于 2018-2-7 17:34:51 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|重庆度量科技  本站关键词:快速开发平台

GMT+8, 2018-2-26 09:28 , Processed in 0.256903 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表