要想构建美观的网页，学习CSS是其中一种方式，但在学习过程中，我们大部分会限制自己，一次次地运用相同的属性， 毕竟，人是一种习惯性的动物。随着科技进步，现在的生活节奏越来越紧凑，各行各业都关注着提高效率，前端开发也不例外。很多人会通过选择器的使用和简化代码来快速加载渲染，但Less、SCSS这样的预处理器在工作时就会“绕路”，而使用CSS速度更快。这里有些小技巧教你减少重复规则，标准化样式流程等等，帮助你解决日常问题，让你的工作变得高效流畅!

1、精灵技术，它主要针对背景图片，插入的img不需要这个技术，但要测量每个小背景图片的大小和位置。给盒子指定小的背景图片时，背景定位几乎都是负值。它可以有效地减少服务器接受和发送请求的次数，提高页面的加载速度

2、运用字体图标，首先把包包里面的font文件夹复制出来一份，放在我们项目根目录。然后在html文件标签里面添加结构，接着在html文件样式style里面声明字体：告诉代码和别人使用我们自己自定义的字体，一定要注意路径哦!最后给盒子设置字体就行。

3、一致的垂直结构提供了一种视觉美学，让人更想看下去，更具可读性。如果owl选择器过于通用，请在元素内使用通用选择器(*)为布局的特定部分创建一致的垂直节奏。

4、如果你希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个方块。Box Decoration Break属性让你可以只对文本运用样式，同时保持填充和页边距的完整性。当你要在悬停时应用突出显示，或在滑块中设置子文本样式让它有突出显示的外观，这功能特别有用。

5、样式“默认”链接，你几乎可以在每个样式表中找到一个通用的A样式。但这会逼迫你为子元素中的任何链接编写额外的覆盖和样式规则，而且在使用像WordPress这样的CMS时，或许会致使你的主链接样式容易出现问题。尝试这种较少干扰的方式为“默认”链接添加样式。

6、隐藏未静音的自动播放视频，这对于自定义用户样式表来说是一个很好的技巧。比如在你处理无法从源代码轻松控制的内容时，它就会帮你免除在加载页面时自动播放视频中的声音干扰访问者。

7、最强大的CSS级别来自CSS变量，它允让你可以声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你能有一套颜色在整个项目中使用，来维持一致性。在CSS中反复重复这些颜色值是件烦人的事情，而且还容易出错。假如某个颜色在某个时刻需要改变，就得去找寻和替换，这是相当慢的，当为最终用户构建产品时，变量使得定制变得容易。

8、shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内容应围绕该形状包装。 一般情况下，内联内容包围其边距框。 shape-outside提供了一种自定义此包装的方法，就像是文本包装在复杂对象周围而不是简单的框中。简单来说就是文字是根据图片的边边排版的，什么形状都行。它采用与clip-path相同的值。clip-path定义用户如何查看元素，shape-outside定义其他HTML元素如何查看元素。