Uniform identifier/class naming across HTML, CSS and JS

Question

How does one ensure that HTML, CSS and JS have uniform identifiers. For example, one such set of identifiers could be class names. e.g.:

CSS:

.user-profile{
 ...
}

JS:

document.getElementsByClassName( "user-profile" ).(...)

HTML:

<div class="user-profile"> ... </div>

Are there any IDEs that can provide this functionality? Given that these are technically strings, I'd assume it would be hard to determine 'equality'.

Answer 1

There are no variables in HTML. I think you are talking about id and class attributes.

When you change an id or a class, the easiest way to reflect the change in CSS and JavaScript is to grep the related files.

I'm not sure an automated renaming by an IDE would be helpful: there are many cases where you don't want CSS/JavaScript files to be modified. A basic example: you change a class of an element, because you want a different style.

Also, if you have to do a lot of changes in ids and classes, check that you're using proper naming conventions and you chose the values thoughtfully from the beginning.