css注意点 - 掘金

在我们的日常工作中，前端和后端的良好合作是非常重要的，然而在很多时候，前端把写好的静态页面提交给后端的小伙伴整合，特别是某些单独的模块需要整合进业务系统框架中的时候，往往会出现很多问题，以我个人遇到的情况来说，最多的问题就是css的样式问题。比如说，没有滚动条、设置的样式不生效、元素显示不出来等等等等。

当在整合时遇到这些问题的时候，不同的人可能会按照自己的习惯去调试css样式，这样往往会导致后期维护样式混乱，出现各种各样的问题，究其原因就是css样式编写混乱，不够明确，不利于后续人员维护。

作为项目的参与者，我相信每个人的目的都是顺利推进项目，降低后期维护成本。接下我就从前端页面样式角度出发，介绍一下如何编写css样式来降低维护成本，减少出错。

1.如何给元素加css样式

为一个元素添加样式的方式主要有以下几种方式 1.内联css样式

2.html中通过style标签设置样式

3.link引入css文件

在这三种常见的方式中，出于可维护性的考虑，应该优先使用第三种方式，尽量避免第一种方式。原因稍后介绍。

2.css的优先级

在不同的复杂场景下，css选择器的优先级粗略如下（以五种比较常见的写法为例）（从高到低排序） 1.在属性后使用!important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素内的内联样式

3.id选择器

4.类选择器

5.通配符选择器

6.浏览器自定义或继承的属性

可以看到，很多人最常用的style内联属性样式的优先级非常高，如果项目大量运用这种高优先级的写法的话，那么这些元素的样式后续的调整将是非常困的。一般调整页面的样式。首选的方案就是通过link标签引入css文件，那么css的选择器那么多，我如何知道这些选择器的优先级呢？

接下来介绍一下css选择器优先级算法，css选择器可以参考w3c，只要理解，无需死记硬背也能熟练使用。首先来看一下w3c官方文档对css优先级计算的介绍

翻译过来意思大概就是，选择器的优先级遵循以下准则： 1.计算id选择器的数量赋值给a 2.计算类选择器、属性选择器、伪类选择器的数量赋值给b 3.计算标签选择器和伪元素选择器的数量赋值给c 4.忽略通配符选择器。。。否定伪类中的选择器也会被计算，而否定伪类本身不计算在内（这句不重要，使用场景很少，可以忽略）计算出abc的值后，将abc连接起来，数值越大，优先级越高，示例见截图，写的很清楚。

3.css编码规范

一般来讲，不同人员合作完成页面，需要遵循一定的规范，增强可维护性，接下来介绍一些比较好的规范。

语法

为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入一个空格。为了获得更准确的错误报告，每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5代替 0.5；-.5px代替 -0.5px）。十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。尽量使用简写形式的十六进制值，例如，用 #fff代替#ffffff 为选择器中的属性添加双引号，例如，input[type="text"]只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。避免为 0 值指定单位，例如，用 margin: 0;代替margin: 0px;。示例如下

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列： Positioning Box model Typographic Visual 由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的*内部（inside）*或者是不影响前两组属性，因此排在后面。完整的属性列表及其排列顺序请参考 Recess。示例如下

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

不要使用 @import

与标签相比，@import指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：使用多个元素通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能请参考 Steve Souders 的文章了解更多知识。示例如下

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

简写形式的属性声明

在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下： padding margin font background border border-radius 大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。在 MDN（Mozilla Developer Network）上一篇非常好的关于shorthand properties 的文章，对于不太熟悉简写属性声明及其行为的用户很有用。示例如下

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

以上css编码规范是我拜读一个前端大神的文章筛选出的平时工作中接触较多的注意点，更多内容可以去原文查看

关于css的一些注意点就介绍到这里，如有问题欢迎指正。