度量快速开发平台-专业、快速的软件定制快开平台

标题: html与css命名规范小结 [打印本页]

---

作者: fteair    时间: 2020-7-6 17:48
标题: html与css命名规范小结

一、命名规则说明

• 所有的命名最好都用小写
• 使用英文命名
• 给每一个表格和表单加上一个唯一的、结构标记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……
  

---

作者: fteair    时间: 2020-7-6 17:49

---

作者: fteair    时间: 2020-7-6 17:49

---

作者: 张兴康    时间: 2020-7-7 14:05

---

作者: fteair    时间: 2020-7-7 17:34

---

作者: fteair    时间: 2020-7-7 17:34

---

欢迎光临 度量快速开发平台-专业、快速的软件定制快开平台 (http://bbs.delit.cn/)

Powered by Discuz! X3.2