编写出色CSS代码的13个建议

CSS学起来并不难，但在大年夜型项目中，就变得难以治理，特别是不合的人在CSS书写风格上稍有不合，团队上就加倍难以沟通，为此总结了一些若何实现高效整洁的CSS代码原则：

1. 应用Reset但并非全局Reset

不合浏览器元素的默认属性有所不合，应用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但须要留意的是，请不要应用全局Reset：

*{ margin:0; padding:0; }

5. 应用多重选择器

这不仅仅因为它是迟缓和低效力的办法，并且还会导致一些不须要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的不雅点雷同，Reset并不是一成不变的，具体还须要根据项目标不合需求做恰当的修改，以达到浏览器的兼容和操作上的便利性。我应用的Reset如下:

/** 清除表里边距 **/ 
body, h1, h2, h3, h4, h5, h6, hr, p, 
blockquote, /* structural elements 构造元素 */ 
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 
pre, /* text formatting elements 文本格局元素 */ 
form, fieldset, legend, button, input, textarea, /* form elements 表单位素 */ 
th, td, /* table elements 表格元素 */ 
img/* img elements 图片元素 */{ 
border:medium none; 
margin: 0; 
padding: 0; 
} 
/** 设置默认字体 **/ 
body,button, input, select, textarea { 
font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; 
} 
h1, h2, h3, h4, h5, h6 { font-size: 100%; } 
em{font-style:normal;} 
/** 重置列表元素 **/ 
ul, ol { list-style: none; } 
/** 重置超链接元素 **/ 
a { text-decoration: none; color:#333;} 
a:hover { text-decoration: underline; color:#F40; } 
/** 重置图片元素 **/ 
img{ border:0px;} 
/** 重置表格元素 **/ 
table { border-collapse: collapse; border-spacing: 0; }

2. 优胜的定名习惯

代码注释可以让别人更轻易读懂你的代码，且合理的组织代码注释，可使得构造加倍清楚。你可以选择做的样式表的开端添加目次:

无疑混乱无章或者无语义定名的代码，谁看了都邑抓狂。就像如许的代码：

我想即使是初学者，也不至于会在实际项目中如斯定名一个class，但有没有想过如许的代码同样是很有问题的：

问题在于如不雅你须要把所有本来红色的字体改成蓝色，那修改后就样式就会变成：

.red{color:bule;}

#container{ font-family:Georgia, serif; }

如许的定名就会很让人费解，同样的定名为.leftBar的侧边栏如不雅须要修改成右侧边栏也会很麻烦。所以，请不要应用元素的特点(色彩，地位，大年夜小等)来定名一个class或id，您可以选择意义的定名如：#navigation{…}，.sidebar{…}，.postwrap{…}

如许，无论你若何修改定义这些class或id的样式，都不影响它跟HTML元素间的接洽。

别的还有一种情况，一些固定的样式，定义后就不会修改的了，那你定名时就不消担心方才说的那种情况，如

.alignleft{float:left;margin-right	
			 1/4    1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　如何使用Flexbox和CSS Grid，实现高效布局
            
            CSS 浮动属性一向是网站上分列元素的重要办法之一，然则当实现复杂构造时，这种办法不老是那么幻想。荣幸的是，在现代网页设计时代，应用 Flexbox 和  CSS Grid 来对齐元素，变得相对轻易>>>详细阅读


本文标题：编写出色CSS代码的13个建议
地址：http://www.17bianji.com/lsqh/37767.html
 1/2    1