Isn’t creating HTML attributes like on a bad practice?

[simevidas]

From what I understand, custom HTML attributes defined by our web apps should be prefixed with data- to guard against potential name collisions.

I might be wrong.

[devinivy]

Yes, once CuttySSark loads it adds on attributes. That is not compliant as you point out, but I wasn't ready to sacrifice readability. Taking your suggestion, a Cutty selector would look like [data-on~="click"], which bothered me more than JS causing a website to fail W3 compliance. And again, it only fails compliance after DOM-ready, so you still do write compliant HTML and CSS.

Thanks for bringing this up... I will plan to make this point in the docs! Do you have any suggestions for some sort of compromise between W3 compliance and readability catering to a feel of native functionality?

[simevidas]

so you still do write compliant HTML and CSS.

That's not the issue. The issue is compatibility. What if W3C decides to standardize the on attribute for some native functionality. That would create compatibility issues with your tool and the CSS code that relies on your tool.

One idea: Have your tool parse the CSS and dynamically change on to data-on directly in the style sheet that is loaded onto the user's page. Not sure how feasible though.

[devinivy]

I understand the well. I just think that the fact that Cutty allows you to write compliant code is an important point.

I made a bet (against myself) that W3 wont ever use the on attribute. Its very short and unspecific. I would be much more worried about data-on being used in another library on the same page than on being used any time soon by the W3. Of course, this does lead to your page not being W3 compliant at some point after DOM-ready, but I feel it's a minor issue worth keeping for the sake of readability. The same issue can be found in major libraries like AngularJS.

If the W3 outlines an on attribute I will release a new version with some sort of fix.

You can not directly modify stylesheets using Javascript, though you can read them. The whole point is to assign styles natively using a true stylesheet rather than doing something like assigning the styles via jQuery. That way any limitations are on the browser-level.

[simevidas]

AngularJS is creating ng- prefixed attributes. From what I understand, attributes that contain dashes are acceptable which means that you could use attributes like on-click and on-show. Basically, you would take up the on- namespace, just like Angular uses the ng- namespace. Would be better, I think.

[devinivy]

That might actually make for more readable Cutty selectors. On the flipside, it's confusingly similar to onclick, etc. Also, when using namespaced events you'd end up with periods in HTML attributes, which is okay technically, but doesn't seem ideal. I believe the current solution is the simplest, and I think it breaks compliance in a very forgivable way. Right now it's sort of like a very small on namespace.

[cmegown]

Well if Angular is prefixing with ng- I think CuttySSark should just prefix with something similarly specific to it's purpose like cs- , cutty-, or maybe ssark-... or some other random variation. I know when I was playing around with this, I was looking at my stylesheet and really disliking how it was kind of hard to understand what those styles were for.

[devinivy]

Do you mean you don't like that you can't tell what library it's used by? Is it worth the loss of a semi-native feel?

[cmegown]

More or less. I would know since I did it myself, but if this were to go into something like a WordPress theme that might be used/modified by someone else and they hadn't heard of CuttySSark yet....might be a bit confusing.

I know it's kind of trivial, but I prefer prefixes on pretty much everything related to plugins. Helps keep things in organized.

**Edit: just realized my comments are a little negative :P great work on this though, this is a brilliant little tool you've created!

[devinivy]

I'm considering css-on and on-[event]. Discussion is moved to #8. It's likely that CuttySSark v2 will use a different naming convention.