前言
在前端的开发中，我们经常需要写 CSS 样式来美化页面。但是，CSS 中有一些繁琐的重复代码，例如每个样式中都需要写 font-size、margin 等等，虽然我们可以通过提取公共样式的方式来避免这种情况，但是这样会增加代码的维护成本，并且很难从视觉上区分哪些是公共样式，哪些是特殊样式。
为了解决这个问题，诞生了一种 CSS 预处理器 —— LESS。通过 LESS 这个工具，我们可以轻松地定义变量、混合器、嵌套选择器等等，大大地减少了代码的冗余，并且提高了代码的可复用性和可维护性。
本篇文章将分享一些 LESS 预处理器的常用技巧，以及如何通过选择器的合理搭配来提高 CSS 的性能。
LESS 基础语法
LESS 的语法与 CSS 很类似，只是多了一些预处理器的特性。
变量
通过在变量名前加上@符号定义一个变量：
@link-color: #428bca;
a {
color: @link-color;
}混合器
混合器是一段可以在多个样式中定义并且可以被重复使用的代码块，类似于函数的概念。
-- -------------------- ---- ------- -------------- --------- - ---------------------- -------- ------------------- -------- -------------- -------- - ---- - -------------------- -
嵌套选择器
LESS 的嵌套选择器可以减少 CSS 中的重复代码，也更加直观。
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
-
-
-运算
LESS 也支持一些运算符，如加减乘除等，可以用在数值、颜色、字符串等类型的值上。
@base: #f04615;
.container {
color: @base * 2;
background-color: darken(@base, 10%);
}CSS 选择器优化
CSS 选择器是 CSS 的基础，也是性能瓶颈所在。在书写 CSS 代码时，不合理的选择器的组合很容易导致性能下降。下面就来分享一些选择器的优化技巧。
少用后代选择器
后代选择器是指选择器中包含空格的情况，如：
.footer .links {
/* ... */
}
.main .nav .nav-item {
/* ... */
}这类选择器会先选择父元素，然后在遍历子元素进行匹配。当文档很大时，这种选择器会比较慢，因为每次都要逐级访问。
优化方法：
- 减少层级嵌套，避免使用过度深的选择器；
- 规范类的命名方式，减少选择器嵌套。
少用标签选择器
标签选择器是指以元素类型作为选择器，如：
ul {
/* ... */
}
li {
/* ... */
}这类选择器的匹配不仅考虑了类名和 ID，还包含标签类型，所以会比其他选择器慢。
优化方法：
- 尽量少用标签选择器，而使用类名和 ID 等选择器；
- 为什么这种优化方法有效？因为标签选择器越少，匹配的元素就越少，样式匹配速度就越快。
少用通配符选择器
通配符选择器是指以 * 作为选择器，如：
* {
/* ... */
}这种选择器虽然可以匹配所有元素，但是由于匹配的元素太多，导致样式匹配速度极慢。
优化方法：
- 尽量少用通配符选择器；
- 尽量不要在通配符选择器和其它选择器搭配使用，例如
* > ul。
总结
本文介绍了 LESS 预处理器的使用和 CSS 选择器优化的方法。虽然选择器的优化与 LESS 的应用看起来没有太大的关系，但它们都是前端开发中不可忽略的一方面。
简单而言，尽量少的选择器，能解决问题就好，不要使用高级选择器。配合 LESS 的 mixins 及变量优化 CSS，可以让我们的 CSS 代码更加简洁、高效、可重用。
希望本文对你解决前端优化问题有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f0253af6b2d6eab3a15fe7