学习CSS是构建精美网页的方法之一，但在学习的过程中，我们大多数人都会局限自己，一次又一次地使用相同的属性。毕竟，人是一种习惯性动物。随着科技的进步，生活节奏越来越紧凑。各行各业都关心提高效率，前端开发也不例外。很多人会使用选择器的使用，简化代码来快速加载渲染，但是Less、SCSS等预处理器在工作的时候会“走弯路”，还是用CSS来更快。这里有一些技巧，教你减少重复规则、规范样式流程等，帮助你解决日常问题，让你的工作更加高效顺畅！1.Sprite技术，主要针对背景图片。插入的img不需要这个技术。但是测量每个小背景图像的大小和位置。将小背景图像分配给框时，背景定位几乎总是负的。可以有效减少服务器接受和发送请求的次数，提高页面加载速度。2、使用字体图标，先把包里的字体文件夹复制出来，放到我们项目的根目录下。然后在html文件标签中添加结构，然后在html文件样式中声明字体：告诉代码和别人使用我们自己自定义的字体，一定要注意路径！最后，只需设置框的字体。3.一致的垂直结构提供了更具可读性和可读性的视觉美感。如果猫头鹰选择器过于通用，请在元素中使用通用选择器(*)为布局的特定部分创建一致的垂直韵律。4.如果要对换行到多行的长文本行应用统一的间距、边距、突出显示或背景颜色，但不希望整个段落或标题看起来像一个正方形。BoxDecorationBreak属性允许您仅将样式应用于文本，同时保持填充和边距不变。当您想要在悬停时应用突出显示，或在滑块中设置潜文本样式以使其具有突出显示的外观时，这尤其有用。5.样式“默认”链接，几乎每个样式表都可以找到通用的A样式。但这会迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，它可能会使您的主链接样式容易出现问题。试试这种对“默认”链接进行样式设置的侵入性较小的方式。6.隐藏未静音的自动播放视频，自定义用户样式表的绝妙技巧。例如，当您处理无法从源代码轻松控制的内容时，它将帮助您避免在页面加载时自动播放的视频中的声音分散访问者的注意力。7、CSS最强大的层次来自于CSS变量，它允许你在样式表的任何地方声明一组可以通过关键字重复使用的公共属性值。您可以在整个项目中使用一组颜色以保持一致性。在CSS中一遍又一遍地重复这些颜色值既烦人又容易出错。如果某种颜色需要在某个时候改变，就必须找到并替换它，这相当慢，而且在为最终用户构建产品时，变量使定制变得容易。8.shape-outsideCSS属性定义了一个非矩形的形状，相邻的内容应该包围它。一般来说，内联内容围绕着它的边距框。shape-outside提供了一种自定义这种环绕方式的方法，就好像文本环绕在复杂的对象周围而不是简单的盒子周围。简单来说，文字就是根据图片的边缘排版，什么形状都行。它采用与clip-path相同的值。clip-path定义用户如何看待该元素，shape-outside定义其他HTML元素如何看待该元素。
