编写现代 CSS 代码的 20 个建议

的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

img {   
    width: 300px;   
    height: 200px;   
}   
div {   
    width: 300px;   
    height: 200px;   
    background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');   
    background-position: center center;   
    background-size: cover;   
}   
section{   
    float: left;   
    margin: 15px;   
}

不过这种方式也是存在缺陷的，譬如你无法设置图片的懒加载、图片无法被搜索引擎或者其他类似的工具抓取到，有个不错的属性叫object-fit可以解决这个问题，不过该属性目前的浏览器支持并不是很完善。

Better Table Borders

HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:

table {   
    width: 600px;   
    border: 1px solid #505050;   
    margin-bottom: 15px;   
    color:#505050;   
}   
td{   
    border: 1px solid #505050;   
    padding: 10px;   
}

这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:

注释格式优化

CSS虽然谈不上一门编程语言但是其仍然需要添加注释以保障整体代码的可读性，只要添加些简单的注释不仅可以方便你更好地组织整个样式表还能够让你的同事或者未来的自己更好地理解。对于CSS中整块的注释或者使用在Media-Query中的注释，建议是使用如下形式：

/*---------------   
    #Header   
---------------*/header { }header nav { }/*---------------   
    #Slideshow   
---------------*/.slideshow { }

而设计的细节说明或者一些不重要的组件可以用如下单行注释的方式:

/*   Footer Buttons   */   .footer button { }   
.footer button:hover { }

同时，不要忘了CSS中是没有//这种注释方式的:

/*  Do  */p {   
    padding: 15px;   
    /*border: 1px solid #222;*/   }/*  Don't  */p {   
    padding: 15px;   
    // border: 1px solid #222;     }

使用Kebab-case命名变量

对于样式类名或者ID名的命名都需要在多个单词之间添加-符号，CSS本身是大小写不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-:

/*  Do     */   .footer-column-left { }   
/*  Don't  */   .footerColumnLeft { }   
.footer_column_left { }

而涉及到具体的变量命名规范时，建议是使用BEM规范，只要遵循一些简单的原则即可以保证基于组件风格的命名一致性。你也可以参考CSS Tricks来获得更多的细节描述。

避免重复代码

大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因此我们并不需要再单独地为元素设置该属性。我们只需要在html或者body中添加该属性然后使其层次传递下去即可:

html {   
    font: normal 16px/1.4 sans-serif;   
}

使用transform添加CSS Animations

不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好:

.ball {   
    left: 50px;   
    transition: 0.4s ease-out;   
}/* Not Cool*/.ball.slide-out {   
    left: 500px;   
}/* Cool*/.ball.slide-out {   
    transform: translateX(450px);   
}

Transform的几个属性translate、rotate、scale都具有比较好的浏览器兼容性可以放心使用。

不要重复造轮子

现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。所以如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。

尽可能使用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:

a{   
    color: #fff;   
    padding: 15px;   
}   
a#blue-btn {   
    background-color: blue;   
}   
a.active {   
    background-color: red;   
}

我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)

避免使用!important

认真的说，千万要避免使用!important，这可能会导致你在未来的开发中无尽的属性重写，你应该选择更合适的CSS选择器。而唯一的可以使用!important属性的场景就是当你想去复写某些行内样式的时候，不过行内样式本身也是需要避免的。

使用text-transform属性设置文本大写

Star Wars: The Force Awakens
   
.movie-poster {   
    text-transform: uppercase;   
}

Em, Rem, 以及 Pixel

已经有很多关于人们应该如何使用em，rem，以及px作为元素尺寸与文本尺寸的讨论，而笔者认为，这三个尺寸单位都有其适用与不适用的地方。不同的开发与项目都有其特定的设置，因此并没有通用的规则来决定应该使用哪个单位，这里是我总结的几个考虑:

在大型项目中使用预处理器

估计你肯定听说过Sass,Less,PostCSS,Stylus这些预处理器与对应的语法。Preprocessors可以允许我们将未来的CSS特性应用在当前的代码开发中，譬如变量支持、函数、嵌套式的选择器以及很多其他的特性，这里我们以Sass为例:

$accent-color: #2196F3;   
a {   
    padding: 10px 15px;   
    background-color: $accent-color;   
}   
a:hover {   
    background-color: darken($accent-color,10%);   
}

使用Autoprefixers来提升浏览器兼容性

使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸亏现在也是有很多工具可以辅助我们进行这样的开发:

在生产环境下使用Minified代码

为了提升页面的加载速度，在生产环境下我们应该默认使用压缩之后的资源代码。在压缩的过程中，会将所有的空白与重复剔除掉从而减少整个文件的体积大小。当然，经过压缩之后的代码毫无可读性，因此在开发阶段我们还是应该使用普通的版本。对于CSS的压缩有很多的现行工具:

选择哪个工具肯定是依赖于你自己的工作流啦~

多参阅Caniuse

不同的浏览器在兼容性上差异很大，因此如果我们可以针对我们所需要适配的浏览器，在caniuse上我们可以查询某个特性的浏览器版本适配性，是否需要添加特定的前缀或者在某个平台上是否存在Bug等等。不过光光使用caniuse肯定是不够的，我们还需要使用些额外的服务来进行检测。

Validate:校验

对于CSS的校验可能不如HTML校验或者JavaScript校验那么重要，不过在正式发布之前用Lint工具校验一波你的CSS代码还是很有意义的。它会告诉你代码中潜在的错误，提示你一些不符合最佳实践的代码以及给你一些提升代码性能的建议。就像Minifers与Autoprefixers，也有很多可用的工具:

CSS实现背景图片右侧定位的5种小技巧

~欢迎点击上方蓝字「歪码行空」快速关注~

说到背景图片右侧定位，大家一定会想到使用background-position属性来实现。

底部定位同理，本文以右侧为例

下面，我们先来简单看一下background-position的基本用法及注意事项。

background-position属性的值既可以使用关键字，也可以是像素、em或百分比，可以指定两个值，分别表示相对于左侧的偏移量和相对于顶部的偏移量。关键字包括用于 x 轴的left/cener/right和用于 y 轴的top/center/bottom，规范没有约定两个值的先后顺序。不过歪马建议大家不管使用什么值，都先指定 x 轴，再指定 y 轴。

使用像素和em与使用百分比进行背景定位时，计算方式是不一样的。使用像素和em时，会一直以图片的左上角相对于父元素（左侧和顶部）来计算。使用百分比时，则是以图片中对应比例的点定位到父元素对应比例的点。百分比的定位效果如下：

百分比的定位效果(图片来源W3C)

此外，还需要注意，关键字和其他值不可以混用，否则会失效。

至此，我们简单过了下background-position的用法和注意事项。接下来，我们思考一下如何实现如下的效果，即背景图片右侧定位。

背景图片右侧定位

首先，根据上面介绍的单位和关键字，我们应该无法实现背景图片右侧定位，且图片周围留有一定的空白间隙。我们没法用像素/em/百分比，因为不知道该距离左侧多远，关键词也无法预留间距。

如果你不知道该怎么实现的话，我们一起来看看 5 种实现这一效果的小技巧吧。

1. 伪实现：嵌套元素实现类似效果

通过元素嵌套的方式，我们可以很容易实现这样的布局，外层元素加padding，flex布局、绝对定位、float这些方式都能实现，实现方式较为简单，这里我就不放代码了。

这类实现方式，由于嵌套了元素，并不是我们想要的实现效果。所以这是一种伪实现。

2. 蹩脚的实现：背景图片右侧添加透明像素

上图的效果中，图片右侧有10px的空隙，我们可以通过改变背景图，在右侧加上10px宽的透明像素，然后借助background-position的关键字就能实现上述的效果了。代码如下：

.bg-right {
  width: 500px;
  height: 120px;
  padding: 10px;
  margin: 50px auto;
  box-sizing: border-box;
  border: 10px solid rgba(255, 160, 122, 0.3);
  /* 背景图右侧添加10px宽透明像素（注释一下，其实url对应的图片并没有加） */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat;
  /* 改变背景元素尺寸，原为80x80px */
  background-size: 90px 80px;
  line-height: 80px;
  font-size: 20px;
  background-position: right center;
}

这种方式，借助常规的方式就能实现上述效果，但是需要对背景图进行改动，如果空白间隙大小调整，就需要调整背景图，所以比较麻烦。不过，这个方法的好处是，兼容性很好。

3. 借助 calc()函数实现

CSS 中，我们可以借助calc()函数来进行加减乘除(+-*/)操作，并且可以进行混合单位的运算。

所以借助这一函数，我们可以如下实现：

.bg-right {
  /* ... */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat;
  background-size: 80px 80px;
  background-position: calc(100% - 10px) 50%;
}

注意其中加号和减号两次需要添加空格，这是为了和负号作区分。

这一方法总的来说兼容性还好，只不过 IE9 在calc()和background-position结合使用的时候会导致浏览器崩溃，所以如果你要兼容 IE9，不要使用该方法。

这种方式也有个不便利的地方时，calc()中减去的10px与padding相同，如果padding调整，这里也要调整。

4. 使用 background-position 的新语法

在CSS Backgrounds and Borders Module Level 3[1]中，background-position引入了新语法，可以先写边界关键字，再写长度值。如下，我们可以这样实现：

.bg-right {
  /* ... */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat right center;
  background-position: right 10px top 50%;
}

该方法不支持 IE8 和 Safari7。不过我们可以通过上面的方式，在background缩写语法中，加入right center来作为后备，实现优雅降级。

该方法与使用calc()一样，如果padding调整，这里也要调整。

5. 使用 background-origin 指定背景图片摆放的参考位置

background-origin可以指定背景图片摆放的参考位置。支持以下三个值：border-box|padding-box|content-box。默认值为padding-box。

如果指定为border-box，则背景图会和边框重叠。如下所示：

背景图和边框重叠

通过content-box就可以实现我们前面所要的效果，代码如下。

.bg-right {
  /* ... */
  background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat right center;
  background-origin: content-box;
}

这个方法比较简洁明了，并且在padding发生变化时，无需做其他调整，所以最推荐这种。但是如果距离右边的距离大于padding的话，还是得借助第二和第三种方法。

至于兼容性，也是 IE8 及更早的浏览器不支持，Safari 支持性还好。

关于背景图片实现右侧定位，今天就简单介绍这 5 种方法，希望能对你有帮助。

参考链接参考资料

[1]

CSS Backgrounds and Borders Module Level 3:

[2]

Positioning Offset Background Images:

[3]

CSS 秘密花园：灵活的背景定位:

❤️爱心三连击

1.看到这里了就点个在看支持下吧，你的「在看」是我创作的动力。