I've been implementing a unique approach for more than a year now, and I have yet to come across similar practices elsewhere. Essentially, I am structuring display "states" or "modes" by utilizing CSS classes. Despite searching for terms like "css modes," "css states," "stateful css," etc., I haven't found any existing references under those names.
Here is an example illustrating my method. Consider a responsive text input that communicates with the server to provide real-time feedback on whether the chosen username is available:
Markup:
<div id="username-container" class="username-mode-ready">
<!-- input -->
<label for="username" class="username-label">Username:</label>
<input type="text" id="username" class="username-input" />
<!-- icons -->
<img src="error.png" class="icon error"/>
<img src="ok.png" class="icon accepted"/>
<img src="loading.gif" class="icon loading"/>
<!-- messages -->
<p class="message error">
That username is not available.
</p>
<p class="message accepted">
That username is available!
</p>
<p class="message loading">
Loading ...
</p>
</div>
CSS:
/* Default = hidden */
#username-container .error,
#username-container .accepted,
#username-container .loading {
display : none;
}
/* Show when appropriate */
#username-container.username-mode-error .error,
#username-container.username-mode-accepted .accepted,
#username-container.username-mode-loading .loading {
display : block;
}
The next step involves adding Javascript. Upon interacting with the server, we will:
$('username-container').className = 'username-mode-loading';
Upon receiving a response from the server, we will update the className accordingly:
$('username-container').className = 'username-mode-accepted'; // Username available
$('username-container').className = 'username-mode-error'; // Username taken
This technique allows for easy transition between different display modes without having to manipulate element.style.display individually. It also enables more than just show/hide functionality:
CSS:
/* Set label color to green or red depending on availability */
#username-container.username-mode-accepted .username-label {
color : green;
}
#username-container.username-mode-error .username-label {
color : red;
}
Furthermore, styles can be applied across multiple modes:
Markup:
<img alt="Whew! I searched as hard as I could!" src="done-searching.png" class="icon done-searching"/>
CSS:
/* New icon should display in accepted and error modes */
#username-container .done-searching {
display : none;
}
#username-container.username-mode-accepted .done-searching,
#username-container.username-mode-error .done-searching {
display : block;
Is there existing documentation on this technique? I'm considering referring to it as mode-oriented CSS when explaining it to others, but I would prefer using an established term if one exists.