CSS/SCSS/LESS 开发规范

王立志_LEO
199 阅读2分钟

为了确保 CSS/SCSS/LESS 代码质量、一致性和可维护性，以下是详细的 CSS/SCSS/LESS 开发规范，供团队开发使用。

基本规范

文件结构

  1. 所有 CSS/SCSS/LESS 文件以 .css、.scss 或 .less 为后缀。
  2. 文件名使用小写字母并使用连字符分隔，如 main-style.scss。

命名约定

  1. 类名、ID 名称和变量名使用小写字母和连字符分隔，如 main-container、$primary-color。

  2. 尽量使用 BEM（Block Element Modifier）命名法：

    scss
复制代码
.block {
  &__element {
    &--modifier {
      // 样式
    }
  }
}

代码风格

缩进与空格

  1. 使用 2 个空格进行缩进，不使用 Tab。

  2. 选择器与大括号之间保留一个空格，属性名与冒号之间不留空格，冒号与属性值之间保留一个空格，属性值后加分号：

    scss
复制代码
.selector {
  property: value;
}

选择器

  1. 避免使用过于具体的选择器，保持选择器简洁：

    scss
复制代码
/* 不推荐 */
div.container > ul.list > li.item a.link { }
/* 推荐 */
.link { }

  2. 避免使用ID选择器，如非必要，不使用 # 选择器。

属性

  1. 按照属性的功能分组排序，如布局、盒模型、排版、视觉效果等：

    scss
复制代码
.selector {
  /* 布局 */
  display: flex;
  align-items: center;
  
  /* 盒模型 */
  margin: 10px;
  padding: 5px;
  
  /* 排版 */
  font-size: 16px;
  color: #333;
  
  /* 视觉效果 */
  background-color: #f0f0f0;
  border-radius: 4px;
}

注释

  1. 使用注释对代码进行说明，注释内容简洁明了：

    scss
复制代码
/* 主容器样式 */
.main-container {
  // 布局相关样式
  display: flex;
  justify-content: space-between;

  // 视觉效果相关样式
  background-color: #fff;
  border: 1px solid #ccc;
}

CSS 规范

层叠与优先级

  1. 尽量避免使用 !important，如非必要，不使用。
  2. 合理使用类名，减少选择器嵌套层级，降低样式优先级复杂度。

响应式设计

  1. 使用媒体查询实现响应式设计：

    scss
复制代码
.container {
  width: 100%;
  @media (min-width: 768px) {
    width: 50%;
  }
  @media (min-width: 1024px) {
    width: 25%;
  }
}

  2. 尽量使用百分比或相对单位（如 em、rem）进行布局。

浏览器兼容性

  1. 使用 Autoprefixer 自动添加浏览器前缀，确保样式兼容不同浏览器：

    scss
复制代码
.box {
  display: flex;
}

  2. 定期更新浏览器兼容性列表，确保项目始终兼容主流浏览器。

SCSS/LESS 规范

变量

  1. 使用变量定义常用的颜色、字体、尺寸等，以提高可维护性：

    scss
复制代码
// 颜色变量
$primary-color: #3498db;
$secondary-color: #2ecc71;

// 字体变量
$base-font-size: 16px;

// 尺寸变量
$base-spacing: 10px;

  2. 变量命名使用小写字母和连字符分隔，如 $primary-color。

嵌套

  1. 控制嵌套层级，避免过深嵌套（不超过 3 层）：

    scss
复制代码
.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        text-decoration: none;
      }
    }
  }
}

混合（Mixins）

  1. 使用混合定义可重用的样式片段：

    scss
复制代码
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include center-flex;
  width: 100px;
  height: 100px;
  background-color: $primary-color;
}

继承（Extend）

  1. 使用 @extend 继承相似的样式，减少重复代码：

    scss
复制代码
.button {
  padding: 10px 20px;
  border-radius: 4px;
}

.primary-button {
  @extend .button;
  background-color: $primary-color;
  color: #fff;
}

.secondary-button {
  @extend .button;
  background-color: $secondary-color;
  color: #fff;
}

代码组织

目录结构

  1. 保持项目目录结构清晰，合理划分模块和文件：

    css
复制代码
styles/
  ├── main.scss
  ├── variables.scss
  ├── mixins.scss
  ├── base/
  │   ├── reset.scss
  │   ├── typography.scss
  ├── components/
  │   ├── button.scss
  │   ├── card.scss
  ├── layout/
  │   ├── header.scss
  │   ├── footer.scss
  └── pages/
      ├── home.scss
      ├── about.scss

模块化

  1. 按照功能或组件将样式文件进行模块化划分：

    scss
复制代码
// main.scss
@import 'variables';
@import 'mixins';
@import 'base/reset';
@import 'base/typography';
@import 'components/button';
@import 'components/card';
@import 'layout/header';
@import 'layout/footer';
@import 'pages/home';
@import 'pages/about';

文档和维护

文档

  1. 为项目撰写详细的 README 文件，包含项目简介、安装步骤、使用方法和贡献指南。
  2. 使用注释和文档工具生成 API 文档，确保代码易于理解和维护。

代码评审

  1. 定期进行代码评审，确保代码质量和一致性。
  2. 提交 PR（Pull Request）时，提供详细的描述和相关截图。
  3. 评审时重点关注代码逻辑、性能优化、安全性和可读性。

持续集成

  1. 使用持续集成工具（如 Jenkins、GitHub Actions）自动化测试和部署。
  2. 配置 CI 工具在每次提交时运行测试，确保代码质量。
  3. 将 CI 状态集成到代码库中，便于开发人员实时了解项目状况。

结语

遵循以上规范，可以提高团队协作效率，保证代码质量，提升项目的可维护性和扩展性。希望大家在开发过程中严格遵守，共同打造高质量的样式文件。

avatar
文章
阅读
粉丝