CSS-01 CSS代码标准和规范

一:代码规范

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

 

 

 

  

 

 

 

 

 

 

posted @ 2019-12-02 01:13  Code也疯狂  阅读(359)  评论(0编辑  收藏  举报