Não tenho como afirmar isso citando algum autor, mas o que eu posso dizer é que as pessoas vão ficar felizes se vc não usar uma classe e vou justificar.
No HTML5 nós temos os data-attributes
, ele ao meu ver são ideias para esse tipo de solução, por ele estão no escopo do HTML, e não do CSS. Isso vai evitar que alguém procure no CSS por algo que não está lá. Essa técnica tem sido muito usada por vários Frameworks de Design System como o Bootstrap e o Materializa por exemplo, e outros de JS com plugin jQuery e componentes em geral.
Aqui vc pode ler sobre os data-attributes
: https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Using_data_attributes
Por exemplo olhe o código desse botão do Bootstrap usado para fazer um Collapse, veja como ele tem vários data-
(link da documentação)
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
No JS vc pode acessa-los com var atributo = element.getAttribute(nomeDoAtributo);
Além disso, existem métodos JS para trabalhar com esses atributos como Element.getAttribute()
e fazer um dataset
A propriedade HTMLElement.dataset
permite o acesso, em modo de leitura e escrita, a todos os atributos de dados personalizado (data-*) no elemento. Ele é um mapa de DOMString, com uma entrada para cada atributo de dados personalizado.
Fonte: https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/dataset
Na prática
Exemplo de uso do dataset
. Repare na tag <button>
eu tenho um data-nome=""
e um data-num=""
, e no JS eu chamo eles com .dataset.nome
e .dataset.num
var btn = document.querySelector('button');
btn.addEventListener('click', () => {
console.log('oi "' + btn.dataset.nome+'"', 'e "' + btn.dataset.num + '" são...');
})
<button data-nome="meu nome" data-num="meu numero">clique aqui!</button>
No jQuery vc pode seleciona-los como
<div data-id></div>
$( "div" ).attr("data-id")
Tb vale a penas se informar sobre o .data()
disponível no jQuery https://api.jquery.com/data/
<div data-role="page"></div>
$( "div" ).data( "role" ) === "page";
Minha dica é evitar ao máximo uma classe CSS apenas para ser usada como seletor no JS. Isso vai tornar o código confuso, ruim de manutenção e impreciso. Não acredito ser uma boa design pattern