编写css代码时需要注意什么

这篇文章给大家分享的是有关编写css代码时需要注意什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司专注于武陵网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供武陵营销型网站建设，武陵网站制作、武陵网页设计、武陵网站官网定制、微信小程序开发服务，打造武陵网络公司原创品牌,更为您提供武陵网站排名全网营销落地服务。

一、css顺序

首先声明，浏览器读取css的方式是从上到下的。我们一般书写css只要元素具备这些属性就会达到我们预期的效果，但是这会给以后的维护和浏览器的渲染效率带来一定的影响，那么该怎么书写css的顺序呢？有没有一定的规范呢？

首先我们知道css的属性按特性分为几类；

1.规定元素特性，如display、position、float，这些属性会决定他的排版方式

2.规定元素的空间占据，如line-height、margin、padding、width、height等，这些属性会决定元素的大小和位置

3.规定元素的自身效果，如font-size、color、background等，这些属性会决定元素的效果

其实当我们把css的属性分类结束后，我们会得到一个很明显的答案，我们可以想象一下自己用css按照自己的书写顺序画出来该元素，举例说明

p.detail {
  font-size: 10px;
  line-height: 12px;
  width: 30px;
  height: 30px;
  display: inline;        
}

描述：这是一个元素字体大小10px 行高12px 宽度30px 高度30px 陈列方式为内联样式

当我们开始读取属性的时候，我们会很难对元素进行定位，因为我们不知道元素的特性，陈列方式。读到最后一行的时候才发现，原来这是一个内联元素，宽度和高度的定义就会失效，所以这种css书写顺序是不被推荐的

p.detail {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 10px;
}

描述：这是一个元素，陈列方式为内联-块方式，距上有20px 宽度与父元素等宽高度为20px 颜色为白色字体大小为10px

这样的书写方式就能按照一个我们很容易理解的方式进行渲染

总结：我们书写css的时候推荐的规范是，先书写影响元素陈列特性的属性，再书写影响元素位置的属性，最后书写元素的内部属性

当鼠标hover的时候，我们往往给需要改变的元素添加一个active类名，然后在active里面书写我们需要改变的属性

如：

.content {
  background: black;  
}
.active {
  background: white;
}

当我们点击某元素的时候，需要.content的背景色从黑色变成白色，那么给.content添加active类名就会达到我们的预期效果，然而我们有的时候点击的时候不止要改变一个元素的属性，我们有可能会有这种情况

我们需要在点击一个类名为.click的元素的时候，元素icon字体和 span元素一个字体变大一个变为红色怎么办，我们可以这样