classes múltiplas em html único elemento [fechado]

é uma boa prática usar muitas classes num único elemento HTML? Por exemplo:

<div class="nav nav-centered nav-reversed navbar navigation-block"></div>
Não quero dizer que duas ou três classes num elemento são más, mas que tal quatro, cinco ou até seis?

 38
Author: Andrius, 2013-06-28

2 answers

Resposta Curta

Sim.

Explicação

É uma boa prática uma vez que um elemento pode fazer parte de diferentes grupos, e você pode querer elementos específicos para fazer parte de mais do que um grupo. O elemento pode conter um número infinito de classes em HTML5, enquanto em HTML4 você é limitado por um Comprimento específico.

O seguinte exemplo irá mostrar-lhe o uso de várias classes.

A primeira classe faz o texto color red.

A segunda classe faz o background-color Azul.

Veja como o elementoDOM com várias classes se irá comportar, irá usar ambas as declarações CSS ao mesmo tempo.

Resultado: várias declarações CSS em diferentes classes Irão empilhar .

Pode ler mais sobre: especificidade CSS.

CSS

.class1 {
    color:red;
}

.class2 {
    background-color:blue;
}

HTML

<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>

Vivos demonstração

 54
Author: Jeff Noel, 2017-05-23 12:17:59
É um bom treino se precisares. Também é uma boa prática eles fazerem sentido, para que futuros programadores possam entender o que você está fazendo. [[1]} mas geralmente, não, não é uma boa prática anexar 10 nomes de classe a um objeto porque muito provavelmente o que você está usando-os para, você poderia realizar a mesma coisa com muito menos classes. Provavelmente só um ou dois.

Para qualificar essa Declaração, plugins e scripts javascript podem adicionar muito mais nomes de classe para fazer o que quer que seja eles vão servir. Modernizr, por exemplo, adiciona em qualquer lugar de 5 - 25 classes à sua etiqueta de corpo, e há uma razão muito boa para isso. jQuery UI adiciona muitos nomes de classes quando você usa um dos widgets nessa biblioteca.

 3
Author: relic, 2013-06-28 14:04:44