web前端开发: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……

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180303A08TZT00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券