为什么标签命名很重要
写网页代码时，给元素起名字看似小事，其实影响不小。比如你写了个购物车图标，用 div1 当类名，过两天自己都忘了这是干啥的。团队协作时更麻烦，别人看到 box2、temp 这种名字，根本猜不出用途。
常见命名原则
好的命名应该让人一眼看懂作用。比如用 user-avatar 比 img3 明确得多。推荐使用小写字母，单词间用短横线连接，也就是常说的“烤串式”命名法（kebab-case）。
避免使用缩写或拼音，像 yhxx 或 userInfo 虽然省事，但不够直观，尤其对新成员不友好。如果项目大，建议按功能模块划分前缀，比如订单相关都以 order- 开头。
实际例子参考
下面是一个用户卡片的结构，看看怎么合理命名：
<div class="user-card">
<img src="avatar.jpg" alt="用户头像" class="user-avatar">
<h3 class="user-name">张三</h3>
<p class="user-level user-level-vip">VIP会员</p>
<button class="btn btn-follow">关注</button>
</div>这里每个类名都说明了用途，层级关系也清楚。比如按钮用了 btn-follow，既表明是按钮，又说明动作；会员等级加了 user-level-vip，方便单独控制样式。
表单中的命名技巧
表单字段特别容易乱，尤其是注册页，一堆输入框。别用 input1、fieldA 这种代号。直接按内容来：
<label for="register-email">邮箱地址</label>
<input type="email" id="register-email" name="register-email">
<label for="register-password">登录密码</label>
<input type="password" id="register-password" name="register-password">id 和 name 保持一致，加上页面功能前缀，这样 JavaScript 找元素也快，后期维护省心。
避开这些坑
别用 red-btn 这种带样式的名称，万一以后改成蓝色，名字就误导人了。同样，left-sidebar 如果将来移到右边，也会造成困惑。应该从功能出发，而不是外观。
还有就是别起太长的名字，比如 main-page-user-login-button，虽然清楚但啰嗦。适当精简，只要不产生歧义就行。