Tl;dr: supposed I am not going to use those IDs as JS selectors or anchors, but only to set styles, and I don't care much about validation, can using IDs more than once on a page cause any problems?
Long version with context: I am working in a big company in IT. For the purpose of maintaining company's intranet, there is an ancient CMS in use, one that doesn't allow for any custom classes or source code edition. All that it allows is adding IDs to every element on a page, or injecting external snippets (ie. I can inject external style.html page, which is basically stylesheet between tags – and it will then be in the code of the output page as a internal stylesheet, or I can inject script.html page with tags, etc.).
And just to clarify, there is virtually zero chance to change the CMS, browser, or anything else really, got to work with what we've got.
Recently it was decided that intranet needs some redesign. Some things needed are easily done by applying changes to already existing default classes, so it's not a problem, but there is also an idea to create some new styles, like buttons, that could be applied to existing CMS elements (i.e. links). Those obviously can't be styled globally, since we don't want all links to be buttons.
The idea is, thus, to use IDs as classes:
#button {border:...; border-radius:...; padding:...;}
#button_red {background-color: red;}
#mt-4 {margin-top:40px;}
Given that we are not going to use those IDs for any other purpose but styling, and that we will take appropriate precautions to avoid conflicts (custom prefix for example, creating naming convention guidelines etc.), is there any potential for errors, exceptions or other nasty surprises if I use IDs more than once?
The company uses modern Google Chrome and, unfortunately, IE8. I've done some preliminary testing, and it seems to be working as intended in both, but I'm afraid something might go wrong somewhere, and hence my question here.
Bad practices, validation, JS and anchors aside, can anything else go wrong?
