• CSS命名规范和规则


    一、命名规则

    1)、所有的命名最好都小写
    2
    )、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
    3
    )、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
    4
    )、空元素要有结束的tag或于开始的tag后加上"/"
    5
    )、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
    6
    )、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
    7
    )、给每一个表格和表单加上一个唯一的、结构标记id
    8
    )、给图片加上alt标签
    9
    )、尽量使用英文命名原则
    10
    )、尽量不缩写,除非一看就明白的单词

     

    二、class的命名

    (1).red { color: red; }

    .f60 {color: #f60; }

    .ff8600{ color: #ff8600; }

    (2)字体大小,直接使用”font+字体大小”作为名称,如

    .font12px{ font-size: 12px; }

    .font9pt{font-size: 9pt; }

    Pspx就是表示pixel,像素,是屏幕上显示数据的最基本的点;

    pt就是point,是印刷行业常用单位,等于1/72英寸;

    pixel是相对大小,而point是绝对大小,也有说em是相对单位,而px和pt都是绝 对单位

    px是以屏幕象素为单位。pt是以1/72英寸为单位

    计算公式如下:那么1px = 1pt * 图像分辨率/72 
           PX
    和em转换的公式:
          
    对于PX转em的方法也类似,就是em=16乘以1px,也就是说1.5em=1.5×16=24px

    (3)对齐样式,使用对齐目标的英文名称,如

           .left { float:left; }

           .bottom { float:bottom; }

    (4) 使用”类别+功能”的方式命名(这个就不具体说了,看个人习惯和项目的具体情况而定)

    (5)采用驼峰式命名,如下所示:

       mainContent  newsContent   headerImage

       使用驼峰式命名的好处:增强代码的可读性,避免引入额外的分隔符,从而减少字符数量

    (6)不建议使用中线或者下划线,会增加文件的大小。(尽量不使用,个人习惯不好的可以慢慢改)

  • 相关阅读:
    JavaScript 闭包
    JavaScript for循环
    JavaScript switch语句
    JavaScript if...else 语句
    JavaScript流程控制语句脑图
    JavaScript比较和逻辑运算符
    JavaScript运算符
    记录一下获取浏览器可视区域的大小的js
    20181016记录一次前端布局
    20181015记录一个简单的TXT日志类
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3423908.html
Copyright © 2020-2023  润新知