data-behavior Pattern: Best Practice for JavaScript Developers

<!-- Messy approach: same class used for both style and behavior -->
<button class="btn btn-primary modal-trigger">Open Modal</button>

// Problems:
// 1. If CSS class names change, JS code also needs updating
// 2. Designers may not know which classes are used by JS
// 3. High refactoring risk
$('.modal-trigger').on('click', openModal);

<!-- Clean approach: use data-behavior to mark behavior -->
<button class="btn btn-primary" data-behavior="modal-trigger">Open Modal</button>

// Benefits:
// 1. CSS class changes don't affect JS
// 2. Clear separation of style and behavior
// 3. Easy to understand and maintain
$('[data-behavior="modal-trigger"]').on('click', openModal);

<button 
  class="btn btn-primary" 
  data-behavior="modal-open" 
  data-modal="signup">
  Sign Up
</button>

<div class="modal" data-behavior="modal" data-modal-name="signup">
  <div class="modal-content">
    <h2>Sign Up</h2>
    <button data-behavior="modal-close">Close</button>
  </div>
</div>

// JavaScript handling
$(document).ready(function() {
  // Open modal
  $('[data-behavior="modal-open"]').on('click', function() {
    var modalName = $(this).data('modal');
    $('[data-behavior="modal"][data-modal-name="' + modalName + '"]').show();
  });
  
  // Close modal
  $('[data-behavior="modal-close"]').on('click', function() {
    $(this).closest('[data-behavior="modal"]').hide();
  });
});