Is there a way to temporarily omit specific classes within HTML (
<div class="" ...>For instance:
<div data-group="group1" data-container="true" class="container-lg d-flex /* slider */ p-0">
In this scenario, the class "slider" should be excluded from the list of classes.
[UPDATE]
After considering the feedback, I have decided to follow Lee Taylor's suggestion. To disable a certain class assignment, I will simply add a prefix to that class. For example:
<div class="slider container"...
becomes:
<div class="disable-slider container"...
Sometimes simplicity is the best approach :-D Thank you all for your input!
[/UPDATE]
This method can greatly simplify tasks in multiple ways, such as:
- Avoiding the need to switch between style sheets to locate and comment out matching classes.
- Clearly indicating that a specific function has been excluded, which can improve comprehension for other developers if classes are named logically.
- Facilitating testing by enabling/disabling (style) modules swiftly without the need to switch screens or tabs.
- Streamlining debugging processes by easily commenting out classes to identify issues quickly.
- Promoting the use of distinctively named, easy-to-recognize classes among developers.
Currently, I duplicate entire elements/rows, comment them out, and then manually remove classes from the duplicated code segment.
However, this manual process often leads to outdated information, making it unreliable for debugging purposes.
I am aware that achieving similar functionality is possible with JavaScript, but why complicate things? Additionally, altering HTML structure with JS can cause layout inconsistencies, and not everyone has access to server-side scripting capabilities. This functionality should reside within HTML, in my opinion.
Am I alone in thinking along these lines?