美文网首页三月听我说
html和css命名规范

html和css命名规范

作者: 杜甫的蜡笔 | 来源:发表于2018-09-02 09:34 被阅读38次
    学的快的同学html阶段网页已经做完了,不过考核的结果都不是很理想。所以想着写一下考核中遇到的命名规范问题,大家可以看一下。

    一、命名规则说明

    所有的命名最好都用小写

    使用英文命名

    给每一个表格和表单加上一个唯一的、结构标记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……

    相关文章

      网友评论

        本文标题:html和css命名规范

        本文链接:https://www.haomeiwen.com/subject/vvgpwftx.html