Move Javascript Hooks into data Attributes

[brebory]

Javascript hooks shouldn't even be involved with CSS classes. These should be moved to data attributes.

See: The way that angular handles modifiers on elements and directive hooks.

[jescalan]

I don't think putting a data attribute on every element that is touched by javascript is considered a best practice. I can see the line on thought behind it, but I don't think it should be included as teaching material for best practices. Perhaps the more standard method of selecting elements with css selectors (not special css classes for javascript, just the normal selectors) would be a more standard and easier to comprehend way to handle this for beginners.

[brebory]

So, here's the thing - I feel like it's important to get beginners to separate how they handle styling from how they handle behavior. Using the same CSS classes for both styling and behavior hooks makes things problematic - so I think introducing this concept of separation of concerns is actually really important.

I've had tons of FEWD students that create strange bugs due to using the same kinds of classes for javascript and styling - like something as innocuous as button, because they just don't pay attention to every place that they've used that CSS class elsewhere in their code. If they get used to creating separate classes as Javascript hooks, they'll never have these kinds of bugs again.

[jescalan]

This is definitely an interesting proposition, and took a good bit of time to think about it and discuss it with a few other people. One thing I realized is that pretty much every element with a class on it ends up being styled with css. I mean, in a real website, every element overall ends up being styled. Even if it's just a container, there's probably a clearfix or center or something on it. So because of this, I don't see a ton of value in a separate selector that lets you know that an element is styled with css, because I can assume that everything is styled with css anyway, so that doesn't provide me with much useful info.

The javascript piece however I do see a bit of value in. Every element is definitely not touched by js, so it could be the case that it would be helpful to be able to see which elements are touched by js by looking at your html. Personally, I have not encountered this issue (if I'm working with the behavior, I'm usually in the javascript file rather than html), but I can see potential merits for it, and you mentioned above that you have seen that it helps some students.

I think what bothers me most about this approach straight up is that an element might have a class like submit-button and also submit-button-js on it, which is silly and repetitive. But I wonder if there's a way to do this that's more terse, but still provides the extra info about what is effected by javascript. Perhaps a modification of a character to the beginning or end of a class? Like +submit-button, with the plus indicating that javascript is doing something with this selector? I think that might actually conflict with sass syntax, but curious what your thoughts are on the general idea.

[brebory]

So, this is the reason why I wonder if we should introduce the data- attributes as the hook for Javascript. It's immediately clear that they're being operated on by Javascript, and, I know I keep going back to this, but it's a convention that's already been adopted by AngularJS.

Coming up with our own syntax in CSS classes for this might be counter-intuitive, because we're making the students learn something that they won't see anywhere else.

[jescalan]

Yeah... I guess my issue with this is that data attributes are actually a bit slower of selectors than classes as far as performance. I also detest angular, but thats another story haha :cactus: