介绍
小编给大家分享一下css代码规范的示例分析,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
我们在学习css的过程中会发现css学习起来并不难,但是在大型项目中,它会变得很难打理。不同的编程者在书写风格上有很大不同,这就导致在团队合作时会很难沟通。因此便有了css代码书写规范。
1,使用复位但并非全局重置
不同浏览器元素的默认属性有所不同,使用复位可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局重置:
*{,保证金:0;,填充:0;,} 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI重置和Eric Meyer的做法。我跟Eric Meyer的观点相同,重置并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的重置如下:
/* *,清除内外边距,* */身体,,h2,, h3,, h4,, h5,,编辑,,h7,,人力资源,,p,
引用,,/*,structural elements 结构元素,*/dl, dt,,,, ul,, ol,,,,/*, list elements 列表元素,*/之前,,/*,text formatting elements 文本格式元素,*/形式,自定义字段,传说,,按钮,输入,文本区域,,/*,form elements 表单元素,*/道明,,,,/*,table elements 表格元素,*/img/*, img elements 图片元素,*/{
边界:才能medium 没有;
保证金才能:0;
,,填充:0;
}/* *,设置默认字体,* */身体、按钮,输入,选择、,textarea {
,,字体:12 px/1.5, & # 39;宋体& # 39;,大河马字体,,Srial,, helvetica,,无衬线;
}
h2、h3,祝福,h4, h5,,编辑,,h7 {,字体大小:100%,,}
em{字体样式:正常;}/* *,重置列表元素,* */ul, ol {, list-style:没有,,}/* *,重置超链接元素,* */a {,文字修饰:没有,,颜色:# 333;}
答:hover {,文字修饰:下划线;,颜色:# F40;,}/* *,重置图片元素,* */img{,边界:0 px;}/* *,重置表格元素,* */table {, border-collapse:崩溃;,border-spacing:, 0;,} 2。良好的命名习惯
无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:
.aaabb{保证金:2 px;颜色:红色;} 我想即使是初学者,也不至于会在实际项目中如此命名一个类,但有没有想过这样的代码同样是很有问题的:
& lt; h2> My name is & lt; span 类=皉ed blod"祝辞Wiky & lt;/h2> 问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:
r{颜色:蓝色;} 这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦,所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个类或id,您可以选择意义的命名如:#{…}导航,.sidebar {…}, .postwrap {…}
这样,无论你如何修改定义这些类或id的样式,都不影响它跟HTML元素间的联系。
另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如
.alignleft{浮动:左;margin-right: 20 px;}
.alignright{浮动:权利;text-align:正确;margin-left: 20 px;}
.clear{清楚:两个;indent: -9999 px;} 那么对于这样一个段落
& lt; p 类=癮lignleft"在我是一个段落! & lt;/p> 如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的类名就为alignright就可以了。
3。代码缩写
CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括,填充、边界、字体、背景和颜色值等,如果您学会了代码缩写,原本这样的代码:
李{
,,,字体类型:Arial,, Helvetica,,无衬线;
,,,,字体大小:1.2 em;
,,,行高:,1.4 em;
,,,padding-top: 5 px;
,,,padding-bottom: 10 px;
,,,padding-left: 5 px;
} 就可以缩写为:
李{
,,,,1.2 em/1.4 em 字体:Arial,, Helvetica,,无衬线;
,,,填充:5 px 0, 10 px 5 px;
} 如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet。pdf。
