snippethtmlTip
Use data attributes instead of HTML classes to represent state
Viewed 0 times
representdatastateattributesinsteadclassesusehtml
Problem
More often than not, when representing UI state in HTML, we use classes. This often translates into React components or JavaScript code that check a handful of conditions and add or remove classes accordingly. Let's look at an example:
In this example, we're modeling an element for an order summary. The element can be in one of three states: _loading_, _completed_, or _error_. We're using classes to represent these states, and we're using JavaScript to add or remove these classes based on the state of the order.
Figuring out the state of the order from the UI should also be straightforward. We can simply check which classes are present on the element:
This feels a little cumbersome, but working with DOM elements in JavaScript often is. Let's take a look at some CSS that could be used to style our three states:
Pretty simple and easy to understand. What if, however, by some twist of fate, we end up with some faulty data from the server? What if the order is both loading and completed? Perhaps it's completed but also contains an error? What will the UI look like then? CSS will use its cascading nature to determine which styles to apply, and that will probably make a mess of thing.
In this example, we're modeling an element for an order summary. The element can be in one of three states: _loading_, _completed_, or _error_. We're using classes to represent these states, and we're using JavaScript to add or remove these classes based on the state of the order.
Figuring out the state of the order from the UI should also be straightforward. We can simply check which classes are present on the element:
This feels a little cumbersome, but working with DOM elements in JavaScript often is. Let's take a look at some CSS that could be used to style our three states:
Pretty simple and easy to understand. What if, however, by some twist of fate, we end up with some faulty data from the server? What if the order is both loading and completed? Perhaps it's completed but also contains an error? What will the UI look like then? CSS will use its cascading nature to determine which styles to apply, and that will probably make a mess of thing.
Solution
<div id="order">
<!-- Order summary content -->
</div>Figuring out the state of the order from the UI should also be straightforward. We can simply check which classes are present on the element:
This feels a little cumbersome, but working with DOM elements in JavaScript often is. Let's take a look at some CSS that could be used to style our three states:
Pretty simple and easy to understand. What if, however, by some twist of fate, we end up with some faulty data from the server? What if the order is both loading and completed? Perhaps it's completed but also contains an error? What will the UI look like then? CSS will use its cascading nature to determine which styles to apply, and that will probably make a mess of thing.
So, to summarize, when representing UI state with classes, we're faced with these issues:
- Manually mapping state to class names using JavaScript.
- Checking class name presence on an element to determine its state.
Code Snippets
<div id="order">
<!-- Order summary content -->
</div>const orderData = {
loading: false,
completed: false,
errorMessage: null
};
const order = document.querySelector('#order');
order.className = `order-summary
${orderData.completed ? 'completed' : ''}
${orderData.loading ? 'loading' : ''}
${orderData.errorMessage ? 'error' : ''}`;const order = document.querySelector('#order');
const isCompleted = order.classList.contains('completed');
const isLoading = order.classList.contains('loading');
const hasError = order.classList.contains('error');Context
From 30-seconds-of-code: data-attributes-as-state
Revisions (0)
No revisions yet.