Como usar várias classes CSS em um único elemento

• Pullquote
• Apresentou
• Deixou

Observe os espaços entre cada um desses valores de classe. Esses espaços são o que os configuram como diferentes classes individuais. É também por isso que os nomes das classes não podem conter espaços, pois isso os definiria como classes separadas. Depois de ter seus valores de classe em HTML, você pode atribuí-los como classes em seu CSS e aplicar os estilos que deseja adicionar. Por exemplo.

.pullquote {…}
.apresentou { … }
p.esquerdo {…}

type = “code”> Nestes exemplos, as declarações CSS e os pares de valores aparecem dentro das chaves, que é como esses estilos seriam aplicados ao seletor apropriado. Se você definir uma classe para um elemento específico (por exemplo, p.esquerdo), você ainda pode usá-lo como parte de uma lista de classes; no entanto, esteja ciente de que isso afetará apenas os elementos especificados no CSS. Em outras palavras, o p.esquerdo estilo só se aplicará a parágrafos com esta classe, uma vez que seu seletor está realmente dizendo para aplicá-lo a “parágrafos com um valor de classe de deixou, “Por outro lado, os outros dois seletores no exemplo não especificam um determinado elemento, portanto, eles se aplicariam a qualquer elemento que use esses valores de classe.

Várias classes, semântica e JavaScript

Outra vantagem de usar várias classes é que aumenta as possibilidades de interatividade. Aplique novas classes a elementos existentes usando JavaScript sem remover nenhuma das classes iniciais. Você também pode usar classes para definir a semântica de um elemento – adicionar classes adicionais para definir o que esse elemento significa semanticamente. Esta abordagem é a forma como os microformatos funcionam.

Vantagens de várias classes

As camadas de várias classes podem facilitar a adição de efeitos especiais a elementos sem a necessidade de criar um estilo totalmente novo para esse elemento. Por exemplo, para flutuar os elementos para a esquerda ou direita, você pode escrever duas classes: esquerda

type = “code”> e à direita

type = “code”> com apenas float: left;

type = “code”> e float: right;

type = “code”> neles. Então, sempre que você tiver um elemento que precisa flutuar para a esquerda, você simplesmente adicionaria a classe “esquerda” à sua lista de classes. No entanto, há uma linha tênue a percorrer aqui. Lembre-se de que os padrões da web ditam a separação de estilo e estrutura. A estrutura é tratada em HTML, enquanto o estilo está em CSS. Se o seu documento HTML estiver preenchido com elementos que possuem nomes de classes como “vermelho” ou “esquerdo”, que são nomes que ditam como os elementos devem ser, em vez de como eles são, você está cruzando a linha entre estrutura e estilo.

Desvantagens de várias classes

A maior desvantagem de usar várias classes simultâneas em seus elementos é que isso pode torná-los um pouco difíceis de observar e gerenciar ao longo do tempo. Pode ser difícil determinar quais estilos estão afetando um elemento e se algum script o afeta. Muitos dos frameworks disponíveis hoje, como o Bootstrap, fazem uso intenso de elementos com várias classes. Esse código pode ficar fora de controle e difícil de trabalhar muito rapidamente se você não for cuidadoso. Ao usar várias classes, você também corre o risco de o estilo de uma classe substituir o estilo de outra. Essa colisão pode tornar difícil descobrir por que seus estilos não estão sendo aplicados, mesmo quando parece que deveriam. Fique atento à especificidade, mesmo com os atributos aplicados a esse elemento. Usando uma ferramenta como as ferramentas para webmasters no Google Chrome, você pode ver mais facilmente como suas aulas estão afetando seus estilos e evitar esse problema de estilos e atributos conflitantes.