CSS命名规范和规则
2013-11-14 19:55
127 查看
一、命名规则
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; }
Ps:px就是表示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)不建议使用中线或者下划线,会增加文件的大小。(尽量不使用,个人习惯不好的可以慢慢改)
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; }
Ps:px就是表示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)不建议使用中线或者下划线,会增加文件的大小。(尽量不使用,个人习惯不好的可以慢慢改)
相关文章推荐
- [css layout][11] three fixed columns
- [css layout][10] three fixed columns
- css 中字体大小
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
- WIN32控件使用系统样式
- WIN32控件使用系统样式
- Webkit内核探究【2】——Webkit CSS实现
- css布局学习4--inline block
- div+css 实现tabs标签的示例代码
- CSS z-index 属性的使用方法和层级树的概念
- border:none与border:0使用区别
- CSS中position的absolute和relative的应用
- div+css实现的小三角tip小提示(原理及代码)
- 修改listView的fastScroll样式
- 导入CSS的四种方式
- 使用JS CSS去除IE链接虚线框的三种方法
- CSS选中的行进行标红处理示例代码
- IE6 div最小高度去除方法以及IE6div垂直居中css样式
- css性能优化(1)
- 修改TabHost标签的字体样式