属性书写顺序

属性书写顺序的重要性

合理的HTML属性书写顺序能提升代码可读性和维护性。当多个开发者协作时，统一样式可以减少认知负担，特别是在处理复杂元素时。属性顺序也影响代码扫描效率，关键属性优先出现能让其他开发者更快理解元素用途。

核心原则

属性顺序应遵循从重要到次要的逻辑。最关键的属性优先出现，辅助性属性靠后。通用规则是：标识类属性 > 数据类属性 > 事件类属性 > 样式类属性。这个排序反映元素从本质特性到表现层的自然过渡。

<!-- 推荐顺序 -->
<div id="main" class="container" data-page="home" @click="handleClick" style="width: 100%">

标识属性优先

id和class应当放在最前面。这些属性直接关联元素的身份和功能，是CSS和JavaScript选择器的主要锚点。当需要覆盖样式或添加交互行为时，开发者会首先寻找这些标识。

<!-- 不推荐 -->
<img src="logo.png" alt="Company Logo" class="header-logo" id="site-logo">

<!-- 推荐 -->
<img id="site-logo" class="header-logo" src="logo.png" alt="Company Logo">

数据属性与ARIA角色

紧随标识属性之后的是data-*和ARIA属性。这些属性虽然不影响视觉呈现，但承载重要语义和交互信息。将data-user-id放在style前面可以强调其业务价值。

<button 
  id="submit-btn" 
  class="primary" 
  data-action="submit-form" 
  aria-label="提交表单"
  disabled
>
  提交
</button>

原生属性排序

标准HTML属性应按功能分组排序：先type/href/src等核心功能属性，再alt/title等描述性属性，最后是target/rel等修饰性属性。对于表单元素，name应当紧跟在id之后。

<!-- 输入框示例 -->
<input 
  id="username" 
  name="username" 
  type="text" 
  placeholder="输入用户名" 
  maxlength="20" 
  required
>

<!-- 链接示例 -->
<a 
  id="help-link" 
  class="external" 
  href="/help" 
  title="帮助中心" 
  target="_blank" 
  rel="noopener"
>帮助</a>

事件处理器的位置

现代框架中的事件绑定指令（如v-on/@click）应放在数据属性之后，样式属性之前。这样将交互逻辑与视觉表现明确区分，同时保持与原生onclick等属性的一致性。

<button
  id="cart-button"
  class="rounded"
  :data-items="cartCount"
  @click="openCart"
  :style="{ color: textColor }"
>
  购物车
</button>

样式与内联属性的处理

内联style和class同时存在时，建议将静态class放在前面，动态style置于末尾。对于Vue/React等框架，绑定样式对象应放在最末位。

<div
  className="responsive-box"
  data-component="widget"
  onClick={handleClick}
  style={{ maxWidth: width }}
>

布尔属性的特殊处理

像disabled、readonly、required等布尔属性，建议放在标准属性之后，事件处理器之前。它们的出现会显著改变元素行为，这个位置能平衡可发现性和逻辑分组。

<input
  id="email"
  name="email"
  type="email"
  placeholder="user@example.com"
  required
  autocomplete="on"
  @blur="validateEmail"
>

动态属性的排序规则

当使用框架指令时，保持指令集中出现。Vue的v-for应紧接在id之后，v-if放在靠前位置，而v-bind对象展开可以放在样式之前。

<li
  v-for="item in items"
  :key="item.id"
  :id="`item-${item.id}`"
  class="list-item"
  v-if="items.length"
  :data-category="item.type"
  @dblclick="editItem"
  :style="itemStyle"
>

元字符属性的位置

key、ref等特殊属性在不同框架中有不同最佳实践。React中key应紧跟在元素声明后，Vue中ref通常放在事件处理器前。

{items.map(item => (
  <ArticleCard
    key={item.uuid}
    id={`article-${item.id}`}
    title={item.title}
    ref={cardRefs[item.id]}
    onClick={selectArticle}
  />
))}

自定义元素的属性顺序

Web Components的自定义属性建议分组排列：先元素自有属性，再通用HTML属性，最后是事件监听器。阴影DOM相关的属性如part应靠近class属性。

<custom-slider
  value="50"
  min="0"
  max="100"
  id="brightness"
  class="theme-dark"
  part="slider-track"
  data-setting="display"
  @slideend="saveSetting"
></custom-slider>

长属性列表的换行策略

当属性超过3个时应考虑换行，每个属性独占一行并保持相同缩进。重要属性可适当添加空行分隔，但单个元素的属性总数建议不超过10个。

<product-card
  id="featured-product"
  class="highlight shadow"
  
  :product-id="currentSku"
  :inventory-count="stock"
  data-warehouse="north"
  
  @mouseenter="showTooltip"
  @mouseleave="hideTooltip"
  @click="addToCart"
  
  :style="cardStyles"
  v-tooltip="productName"
>

工具类框架的特殊情况

使用Tailwind等工具类时，建议将功能类名分组排序：布局类（w-/h-）在前，排版类（text-/font-）居中，效果类（shadow-/ring-）靠后。自定义类名应放在工具类之前。

<div
  id="notification"
  class="alert-box"
  w="full"
  p="4"
  text="lg gray-800"
  bg="white"
  shadow="md"
  rounded="lg"
  border="~ gray-200"
>