在前端开发中，CSS 是一个必不可少的技术。但是，CSS 的编写方式却有很多种，其中比较流行的两种方式是 LESS 和 SASS。本文将介绍 CSS 编写的通用规范，并比较 LESS 和 SASS 的使用。
CSS 编写通用规范
命名规范
命名是 CSS 编写的重要部分，它决定了代码的可读性和可维护性。以下是一些常见的 CSS 命名规范：
- 使用小写字母和短横线分隔符
-。 - 使用语义化的命名，尽可能描述元素的用途，而不是元素的样式。
- 不要使用缩写，除非完全清楚缩写的含义。
- 使用 BEM 命名规范，它包括块（block）、元素（element）和修饰符（modifier）。
样式规范
样式规范是 CSS 编写的另一个重要部分，它决定了代码的可读性和可维护性。以下是一些常见的 CSS 样式规范：
- 使用简洁的样式，避免过度使用样式。
- 避免使用 !important。
- 优先使用 class，而不是 ID 或标签名。
- 避免使用嵌套选择器，它会增加代码的复杂度。
- 避免使用全局样式，它会影响整个页面的样式。
代码组织规范
代码组织规范是 CSS 编写的最后一个重要部分，它决定了代码的可读性和可维护性。以下是一些常见的 CSS 代码组织规范：
- 使用模块化的 CSS，将代码拆分为多个文件。
- 使用 @import 或 Webpack 等工具来合并 CSS 文件。
- 将通用的样式和特定的样式分开。
- 将样式和 HTML 分开，不要将样式写在 HTML 中。
- 使用 CSS 预处理器来简化代码。
LESS vs SASS
LESS 和 SASS 都是 CSS 预处理器，它们可以简化 CSS 编写过程，并提供了一些额外的功能。以下是 LESS 和 SASS 的比较：
LESS
LESS 是一种 CSS 预处理器，它使用类似于 CSS 的语法。以下是 LESS 的一些特点：
- LESS 使用 {} 和 ; 来分隔代码块和语句。
- LESS 支持变量、混合、嵌套和函数等功能。
- LESS 使用 JavaScript 表达式来计算值。
- LESS 可以通过 JavaScript 来扩展。
以下是一个 LESS 的示例代码：
-- -------------------- ---- ------- ------- ----- ---- - ------ ------- - ---- - ----------------- --------------- ----- -
SASS
SASS 是一种 CSS 预处理器，它使用类似于 Ruby 的语法。以下是 SASS 的一些特点：
- SASS 使用缩进来表示代码块。
- SASS 支持变量、混合、嵌套和函数等功能。
- SASS 支持条件语句和循环语句。
- SASS 可以通过 Ruby 来扩展。
以下是一个 SASS 的示例代码：
$color: #333; body color: $color .btn background-color: lighten($color, 10%)
结论
在 CSS 编写中，要遵循命名规范、样式规范和代码组织规范。而 LESS 和 SASS 都可以简化 CSS 编写过程，并提供了一些额外的功能。选择 LESS 还是 SASS，取决于个人喜好和项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676aa28c78388e33bb191436