编程规范

命名规范

HTML + CSS 命名规范

1. 命名需要是具备语义性的单词，不能用 数字 拼音 符号 
    正确示范 ： wrap description title  content
    错误示范 :  aaaa a1 $we 4tdds
2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名  注意: 书写风格必须统一 不容许出现 _ -一起使用的情况
    正确示范 :  header_nav content_left slide_bar  
    错误示范 :  headernav slideBar ContentLeft
3. 命名需要进行适当的缩写, 单词连接层级不要超过4层
    正确示范 :  head_tit_ico 
    错误示范 :  header_title_left_logo_icon

img 标签四要素

为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。
img标签四要素 width height
四要素的width和height只需要写数字 图片的原始宽度和高度 不需要添加单位, 爬虫需要的是原始图片数据
alt不仅是图片替代文本而且起到让搜索引擎蜘蛛了解图片的内容,便于百度图片的收录以及优化。 alt还可以在图片无法加载的时候 显示图片描述文字 让用户了解这个图是做什么的
title不属于四要素 四要素有 src、width、height、alt

正确示范 : <img src='xxx/xxx.png' width='125' height='125' alt='示范'>

错误示范 :  <img src='xxx/xxx.png' width='125px' height='225px'>

CSS书写顺序

良好的CSS书写顺序是前端工程师需要遵守并维护的重要规范

1. 位置属性  position float display overflow 等可以决定元素渲染位置或层级 以及能够影响其他元素渲染位置或层级的属性
2. 自身属性  width height border margin padding background line-height 等可以影响盒子自身展示的属性
3. 文本属性  font- text- word- 等作用于文本的样式属性
4. 新增属性  transform box-shadow 等新增属性

原理

1. 浏览器解读HTML是从上之下单行解析, 如果没有良好的书写顺序, 例如先解析了 width height 那预渲染的时候 就会从默认位置 (当前文档流左上角) 进行渲染
2. 如果后续解析到了 位置属性 浏览器需要擦除之前 渲染好的模型 重新根据 渲染基准点(左上角)位置 和层级 进行重绘, 这样导致浏览器会重复解析同一个元素 造成不必要的重绘
3. 良好的书写顺序是 BAT等一线互联网企业都遵守的CSS书写规范 他可以帮助团队成员协作的时候 迅速排查和后期维护

错误示范

div {
    font-size: 12px;
    width: 150px;
    float: left;
}

正确示范

div {
    float: left;
    width: 150px;
    font-size: 12px;
}

CSS细节

1. 如果属性值为0 不需要加单位;

   .content{
       border:0;
       box-shadow:0 0 4px #333;
   }
   

2. 属性值为0.x 的时候 省略0 直接写 .x

   .content{
       opacity:.5;
   }
   

3. HEX颜色属性值符合AABBCC的格式要缩写为 ABC

   .content{
       color:#f90;  // HEX: ff9900
   }