1

Bom dia, pessoal!
Gostaria de saber se é uma boa pratica aplicar classes a uma tag HTML, apenas para usar com JavaScript, sem usar essa classe no CSS, por exemplo.
Grato!

$(document).ready(function () {
         $('.card1, .card2, .card3').hover(
            function () {
               $(this).animate({
                  marginTop: "-=1%",
               }, 200);
            },
            function () {
               $(this).animate({
                  marginTop: "50px",
               }, 150);
            }
         );
      });

As classes (card1, card2 e card3) não são utilizadas no CSS.

0

2 Respostas 2

5

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​.get​Attribute() 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

2
  • 1
    Muito obrigado, Hugo! Sanou minha duvida por completo! Commented 14/05/2019 às 13:31
  • @ViníciusAlves eu sou designer, não sou dev. e sempre que vejo classes usadas para esse fim não concordo, prejudica o trabalho, dificulta a manutenção e entendimento. Tendo os Data não faz sentido usar uma classe css como seletor de JS. Leia os links tem coisas que podem abrir ainda mais a sua mente! Abs []´s
    – hugocsl
    Commented 14/05/2019 às 13:33
0

Para maior facilidade no desenvolvimento o melhor para identificar uma tag em especifico do html é usar a propriedade id por ser um identificador único, as classes são usadas em casos onde você vai manipular vários objetos que tem coisas em comum, quase que no mesmo conceito de uma classe em POO.

1
  • 1
    ID não é sustentável, imagina que vários elementos vão ter o mesmo comportamento, se vc for usar ID, vc vai ter que declarar TODOS no JS, pois são únicos, imagina agora para 100 elementos, como o seu JS ficaria com 100 IDs diferentes no final? Já o Data- pode ser o mesmo em qq elemento, ele não é único. Não acho usar ID como seletor uma boa prática no geral.
    – hugocsl
    Commented 14/05/2019 às 14:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .