Lichess前端样式优化：全面替换user-select属性为Sass混合指令

在Lichess前端开发过程中，团队发现项目中存在多处直接使用user-select: noneCSS属性的情况。这种写法在现代前端开发中存在几个潜在问题：

1. 浏览器兼容性问题：虽然现代浏览器普遍支持标准的user-select属性，但在某些旧版本浏览器（特别是Safari）中仍需要添加-webkit-user-select等厂商前缀才能确保功能正常。

2. 代码维护性问题：直接使用CSS属性会导致相同功能代码分散在多个地方，一旦需要调整浏览器兼容策略，就需要修改多处代码。

3. 样式一致性：项目中已经存在一个名为prevent-select的Sass混合指令（mixin），它封装了完整的浏览器兼容方案，包括各种厂商前缀。

技术团队决定进行系统性的重构，将所有直接使用user-select: none的地方替换为调用@include prevent-select。这种改进带来了几个显著优势：

• 统一管理浏览器兼容性：所有关于文本选择禁止的逻辑都集中在Sass混合指令中，未来如果需要调整兼容策略，只需修改一处代码。

• 提高代码可读性：使用语义化的混合指令名称prevent-select比直接写CSS属性更清晰地表达了代码的意图。

• 移动端适配保障：在重构过程中，团队特别测试了每个修改点在移动设备上的表现，确保功能一致性。

这个优化案例展示了现代前端开发中几个重要原则：

• 避免直接使用浏览器特定前缀
• 充分利用CSS预处理器提供的抽象能力
• 保持样式代码的一致性和可维护性

对于其他前端项目，这也提供了一个很好的实践参考：当发现项目中存在多处直接使用需要浏览器前缀的属性时，应该考虑将其封装为可复用的混合指令或工具类。