一:代码规范

1.所有的书写都是在英文半角下进行

2.统一用table键进行缩进

3.属性值必须带引号(单引和双引都可以)

4.p,dt,h标签里不能嵌套块属性标签

5.a标签不能嵌套a

二:文件命名

1.文件命名只能由英文小写字母a-z,数字0-9或间隔符-组成

2.文件名中禁止包含特殊符号,包括空格和$等等

3.文件名使用英文名词或英文简写命名

三: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标签四要素

src,width,height,alt

  设置图片的width和height,可以在页面加载时为图片预留空间,如果没有这些属性,浏览器就不知道图片的大小,因此当图片在加载时,页面的布局就会发生变化,但注意这两个属性不用加单位

  alt不单是图片代替文本,而且让搜索引擎了解图片的内容,便于百度图片的收录及优化。

<img src='' width='100' height='100' alt='美女'>

五:CSS书写顺序(重要)

1.位置属性:position(相应的top,left,right,bottom), float, overflow, display 等可以影响元素渲染位置或层级,以及可以影响其他元素的渲染位置或层级的属性。

2.自身属性:width , height, border, margin, padding, background, line-height 等可以影响盒子自身展示的属性。

3.文本属性:text- , font- , word-, color, text-decoration, text-align,vertical-align,等作用于文本的样式属性。

4.新增属性:transform, box-shadow,content,cursor等新增属性。

为什么要这么写呢?这与浏览器解析HTML的原理有关

  • 浏览器解析HTML时,是按照从上到下,一行一行解析的。如果没有良好的书写顺序,比如浏览器先解析了width和height属性,那预渲染的时候就会从当前文档流左上角开始渲染。
  • 等到后面解析到位置属性,浏览器需要擦除渲染好的模型,重新根据渲染基准点左上角的位置和层级进行重绘,这样导致浏览器会重复解析同一个元素,造成不必要的浪费。
  • 良好的书写顺序也有利于团队成员排查和维护代码。

  

                <!-- 错误示例 -->
div {
font-size: 25px;
width: 150px;
float: left;
}
<!-- 正确示例 -->
div {
float: left;
width: 150px;
font-size: 25px;
}

  

六:一些小细节

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

		div {
margin: 10px 10px 0 0;
}

2.如果某项属性值是0.x,那么直接省略0

		div {
opacity: .5;
}

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

 

  

CSS-01 CSS代码标准和规范的更多相关文章

  1. 前端代码标准最佳实践:CSS

    前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能.那么接着上一篇,我们再来 ...

  2. W3C代码标准规范

    一.目的: 为什么要遵循标准我们作为生产者实际上只是位于中游,既不是上游的浏览器制造商,他们是标准的真正制定者,也不算是下游,他们是浏览器的终端使用者.这个角色就意味着我们位于一个接口的位置,我们需要 ...

  3. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  4. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  5. W3C 代码标准规范

    W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组.社区组.商务组等).W3C会根据产业界的标准需求 ...

  6. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  7. CSS格式化 CSS代码压缩工具

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. .net软件开发脚本规范-代码标准(webform)

    一. 代码标准 列表界面 1.1前台代码 1) 样式与js脚本,UI.css为界面样式,Font.css为字体样式,Common.js为通用基础js脚本,基本所有页面都需要,如果有需要新增的复制一行, ...

  9. Bootstrap CSS 栅格、代码和表格

    一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...

随机推荐

  1. 使用GDB调试产生多进程的程序

    如果一个进程fork了多个进程,这时使用GBD工具对程序进行调试会如何呢? 实际上,GDB 没有对多进程程序调试提供直接支持.例如,使用GDB调试某个进程,如果该进程fork了子进程,GDB会继续调试 ...

  2. java.util.Date 与 java.sql.Date 相关知识点解析

    问:java.sql.Date 和 java.util.Date 有什么区别?   答:这两个类的区别是 java.sql.Date是针对 SQL 语句使用的,它只包含日期而没有时间部分,一般在读写数 ...

  3. JSP和Servlet及浏览器与tomcat交互过程

    JSP与SERVLET区别 JSP在本质上就是Servlet,但是两者的创建方式不一样. JSP由HTML代码和JSP标签构成,可以方便地编写动态网页.因此在实际应用中采用Servlet来控制业务流程 ...

  4. 【ElasticSearch】概念

    小史是一个非科班的程序员,虽然学的是电子专业,但是通过自己的努力成功通过了面试,现在要开始迎接新生活了. 对小史面试情况感兴趣的同学可以观看面试现场系列. 随着央视诗词大会的热播,小史开始对诗词感兴趣 ...

  5. RedHat Linux6.4下安装apache服务

    一.换yum 原因:安装apache2.4是需要安装apr . apr-util .pcre.httpd四个包, 在安装pcre包时会报错: configure: error: You need a ...

  6. 数组与List互转的坑

    一.数组转List 非原始类型的数组转List有很多种方式:假设有Integer[] arr = {"a", "b", "c"}; 1.Li ...

  7. luoguP3806 【模板】点分治1

    #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) #define ...

  8. 深圳市利汇电子商务科技有限公司2019年java面试笔试题

    垃圾公司,建议不要去,写的地址去了发现是两个公司公用一个办公场地,还没有公司的招牌,去了交简历给前台然后就是 填一份求职申请,一份笔试题如下,然后就等待,先是人事的一个小妹妹面试,问一些个人问题,为什 ...

  9. easyui for jquery之tooltip

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. ProxyImpl 类

    package com.test.mvp.mvpdemo.mvp.v7.proxy; import com.test.mvp.mvpdemo.mvp.v7.basemvp.BasePresenter; ...