The order of attribute writing

The Importance of Attribute Writing Order

A logical HTML attribute writing order improves code readability and maintainability. When multiple developers collaborate, a unified style reduces cognitive load, especially when dealing with complex elements. Attribute order also affects code scanning efficiency—placing key attributes first allows other developers to understand an element's purpose more quickly.

Core Principles

Attributes should follow a logical order from most to least important. The most critical attributes should appear first, with auxiliary attributes placed later. The general rule is: identification attributes > data attributes > event attributes > style attributes. This sequence reflects the natural transition from an element's intrinsic properties to its presentation layer.

<!-- Recommended order -->  
<div id="main" class="container" data-page="home" @click="handleClick" style="width: 100%">  

Prioritize Identification Attributes

id and class should come first. These attributes directly relate to an element's identity and functionality, serving as primary anchors for CSS and JavaScript selectors. When overriding styles or adding interactivity, developers will look for these identifiers first.

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

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

Data Attributes and ARIA Roles

Following identification attributes are data-* and ARIA attributes. While these don’t affect visual presentation, they carry important semantic and interactive information. Placing data-user-id before style emphasizes its business value.

<button   
  id="submit-btn"   
  class="primary"   
  data-action="submit-form"   
  aria-label="Submit Form"  
  disabled  
>  
  Submit  
</button>  

Sorting Native Attributes

Standard HTML attributes should be grouped by functionality: core functional attributes like type, href, and src come first, followed by descriptive attributes like alt and title, and finally modifiers like target and rel. For form elements, name should immediately follow id.

<!-- Input example -->  
<input   
  id="username"   
  name="username"   
  type="text"   
  placeholder="Enter username"   
  maxlength="20"   
  required  
>  

<!-- Link example -->  
<a   
  id="help-link"   
  class="external"   
  href="/help"   
  title="Help Center"   
  target="_blank"   
  rel="noopener"  
>Help</a>  

Placement of Event Handlers

Modern framework event bindings (e.g., v-on or @click) should be placed after data attributes but before style attributes. This clearly separates interaction logic from visual presentation while maintaining consistency with native attributes like onclick.

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

Handling Style and Inline Attributes

When both inline style and class are present, place static class first and dynamic style last. For frameworks like Vue/React, bound style objects should be placed at the very end.

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

Special Handling for Boolean Attributes

Boolean attributes like disabled, readonly, and required should be placed after standard attributes but before event handlers. Their presence significantly alters element behavior, and this positioning balances discoverability with logical grouping.

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

Sorting Rules for Dynamic Attributes

When using framework directives, keep them grouped together. In Vue, v-for should follow id, v-if should be placed early, and v-bind object spreads can go before styles.

<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"  
>  

Placement of Meta-Character Attributes

Special attributes like key and ref have different best practices across frameworks. In React, key should follow the element declaration, while in Vue, ref is typically placed before event handlers.

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

Attribute Order for Custom Elements

For Web Components, group custom attributes: place element-specific attributes first, followed by generic HTML attributes, and finally event listeners. Shadow DOM-related attributes like part should be near the class attribute.

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

Line-Break Strategy for Long Attribute Lists

If an element has more than three attributes, consider line breaks—each attribute on its own line with consistent indentation. Important attributes may be separated by blank lines, but a single element should ideally have no more than 10 attributes.

<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"  
>  

Special Cases for Utility-First Frameworks

When using Tailwind or similar utility frameworks, group functional classes: layout classes (e.g., w-, h-) first, typography classes (e.g., text-, font-) in the middle, and effect classes (e.g., shadow-, ring-) last. Custom class names should precede utility classes.

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