Class vs data- vs custom attribute
I created a custom checkbox from divs and I am connecting to functions. I originally used classes and jquery dom traversal to put everything together. But then I thought this was the best approach, since I mix functionality and style.
Next I looked at the HTML 5 data- [something] attribute, but it doesn't seem right to me, since my code ends up with a lot of data attributes that have no data, but are just markers for traversing the object. I am also worried about the performance of JQuery as several articles on the stack say attribute queries are slower, but the articles were outdated.
So finally I looked at custom attributes, they feel cleaner than data as they don't imply that they have to store data. But they suffer from the same performance issues (possibly worse as their compatibility is not supported / jQuery). They are also substandard.
On the side of the note, I know that angular uses custom attributes, but is not involved in a workaround (which I know), so the performance fails and I feel like they have a much better argument to use them, and then a simple widget.
My questions:
- Is performance with attributes instead of classes still an issue?
- Is it just bad practice to use fully customized attributes?
- Is it wrong to use data - [something] when your data is not actually stored?
- Which approach would you recommend and why?
Code with both classes and data attributes that perform the same functionalities and style in the case of classes.
<div class="ns-dropdown-zoom ns-toolbar-item " data-cns-type="cns-dropdown">
<div class="cns-dropdown-top">
<input type="text" class="cns-dropdown-selection-visible" value="75%" data-cns-dropdown-sel-visible />
<div class="cns-dropdown-arrow">
</div>
<!-- once we wire up the javascript the true selected value goes here -->
<input class="cns-dropdown-selection-hidden" type="hidden" data-cns-dropdown-sel-hidden/>
</div>
<div class="cns-dropdown-option-list" data-cns-dropdown-opt-list>
<div class="cns-dropdown-option" data-cns-dropdown-opt>
<span class="cns-dropdown-option-value" data-cns-dropdown-opt-value>10%</span>
<div class="cns-dropdown-option-display" data-cns-dropdown-opt-display>10%</div>
</div>
</div>
</div>
Beginning javascript to give you an idea of how I view the dom
var initDropDowns = function () {
// Init function for dropdowns
var dropDowns = $(".cns-drop");
var html = $("html");
html.click(function (event) {
dropDowns.each(function (index, el) {
var optionList = $(el).find(".cns-drop-option-list").get(0);
var selVisible = $(el).find(".cns-drop-selection-visible");
var selHidden = $(el).find(".cns-drop-selection-hidden");
var target = event.target;
var options;
var opt;
var i, iMax;
// Clicking outside the element
if (!$.contains(el, target)) {
$(el).removeClass("cns-drop-expand");
// Clicking inside the element, inclusive
} else {
source to share
Is performance with attributes instead of classes still an issue?
- Querying by attributes is still more expensive than querying by id, but whether this is a problem or not depends on your performance expectations or how often you query. I don't think you will notice the difference in most cases. You can check it out on jsperf .
Is it just bad practice to use fully customized attributes?
- Yes. This is not valid syntax according to HTML version 5. From Angularjs Docs :
Best Practice: Prefer to use a dash-delimited format (e.g. ng-bind for ngBind). If you want to use the HTML validation tool, you can use the data-prefixed version instead (e.g. data-ng-bind for ngBind).
Is it bad practice to use data - [something] when you are not actually storing data?
- Even simple boolean data is still considered data, so I see nothing wrong with saying
data-is-whatever='true'
What approach would you recommend and why?
- If performance is not a major consideration, I would go for data attributes because you can decouple behavior declarations from styling and make your code more readable / easier to maintain.
source to share