我自己遵循的规则

项目规范示例
class名称BEM和OOCSS（面向对象的CSS）banner__button--left
如果没有block，block可以留空，例如 icon-name
JS方法&变量在JavaScript中，习惯上使用camelCase（小驼峰式命名法）来命名变量和函数。在这种命名法中，第一个单词以小写字母开始，随后每个新单词的首字母大写，例如 myVariable 和 computeAverage。computeAverage
fetchUserData
html中的data自定义属性虽然HTML5是不区分大小写的，但按照惯例，data-* 属性应该全部使用小写字母，并且如果属性名由多个单词组成，应该使用短横线（-）来分隔这些单词，例如 data-user-name。data-user-name
数据库字段整个数据库的命名规范应该保持一致。这包括使用相同的命名风格（如驼峰命名法 camelCase、下划线分隔 snake_case 等），以及在相似的字段上使用相同的术语。例如，如果你在一个表中使用了 startDate 来表示开始日期，那么在其他表中也应该使用相同的术语而不是 start_date 或 beginDate。就用下划线吧和其他的做一下区别，例：start_date

BEM

BEM（Block Element Modifier）是一种前端开发中使用的命名约定，旨在通过对CSS类名的结构化命名来帮助开发者理解HTML和CSS之间的关系，从而提高代码的可维护性和可读性。BEM的方法论可以应用于项目的CSS、LESS、SASS等样式代码中，它将CSS类分为三个主要部分：Block（块）、Element（元素）和Modifier（修饰符）。

Block（块）

  • 块是一个独立的、功能上独立的组件，它可以是页面上的一个按钮、导航栏、头部等。
  • 块的名称应该具有描述性，能够清楚地表达其功能或用途，例如 .button、.nav、.header。

Element（元素）

  • 元素是块的一部分，它不能脱离块单独存在。元素是构成块的具体组件，例如按钮的文本、导航栏的链接等。
  • 元素通过双下划线 __ 与其所属的块连接，表示它是块的一部分。例如，.button__text 表示按钮内的文本元素。

Modifier（修饰符）

  • 修饰符用于描述一个块或元素的状态或版本差异，如大小、颜色变化或状态差异（如禁用、激活）。
  • 修饰符通过双短横线 -- 与其所修饰的块或元素连接。例如，.button--large 表示大号按钮，.nav__item--active 表示导航项的激活状态。

BEM的优点

  1. 可重用性：通过BEM，可以创建可重用的组件，减少CSS的重复。
  2. 模块化：BEM提倡独立的块开发，有助于保持样式的模块化。
  3. 清晰的结构：BEM的命名约定提供了一种清晰的方法来描述组件的结构，使得HTML和CSS之间的关系更加明显。
  4. 易于维护：当CSS类名清晰表达了它们的功能和相互关系时，代码的维护变得更加容易。

示例

1
2
3
4
5
6
7
8

<div class="card">
  <img class="card__image" src="image.jpg" alt="...">
  <div class="card__content">
    <h3 class="card__title">Card Title</h3>
    <p class="card__description">Description here...</p>
  </div>
  <button class="button card__button">Learn More</button>
</div>

在这个示例中，.card 是一个块，.card__image、.card__content、.card__title、.card__description 和 .card__button 是元素，它们都是 .card 块的一部分。如果 .button 有一个修饰符表示不同的样式变体，如 .button--primary，那么这个修饰符描述了按钮的一个特定状态或样式变化。

BEM的目的是通过结构化的CSS类名来提高项目的可维护性和可扩展性，它通过明确的命名规范帮助团队成员之间保持一致性，促进更有效的协作。

小程序写组件有办法，组件的对象属性名有办法加入连字符"-“吗

在微信小程序中编写组件时，组件的属性（也称为 properties）定义遵循JavaScript对象的命名规则，这意味着属性名不能直接包含连字符（-）。然而，小程序的自定义组件系统提供了一种机制，允许你在组件的属性名中使用连字符，主要是为了支持HTML属性命名惯例（即使用连字符来命名）。这种机制基于小程序框架的能力，将连字符命名的属性自动转换为驼峰命名法来使用。

例如，如果你在小程序组件的JSON配置中定义了一个带有连字符的属性名：

1
2
3
4
5
6
7
8

{
  "properties": {
    "first-name": {
      "type": String,
      "value": ""
    }
  }
}

在组件的内部，你应该使用驼峰命名法来访问这个属性，因为微信小程序框架会自动将连字符命名转换为驼峰命名。例如，上述 first-name 属性在组件内部会被转换为 firstName ：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

Component({
  properties: {
    firstName: { // 自动转换为驼峰命名
      type: String,
      value: ''
    }
  },
  methods: {
    someMethod: function() {
      console.log(this.data.firstName); // 使用驼峰命名法访问
    }
  }
});

对于使用组件的开发者来说，当他们在小程序的页面或其他组件中使用该自定义组件时，可以按照连字符的方式来设置这个属性：

1
2

<!-- 在页面或父组件中使用自定义组件 -->
<custom-component first-name="John"></custom-component>

总结来说，虽然在组件的JavaScript代码中直接定义对象属性时不能使用连字符，但微信小程序的组件机制允许在组件属性定义中使用连字符，框架会自动处理这些属性名的转换。这使得组件接口可以更贴近HTML属性的命名习惯，同时保持JavaScript代码的兼容性和规范性。