Cascading Style Sheets defina a aparência de um elemento de página da web conectando-se aos atributos que você aplica a esse elemento. Esses atributos podem ser um ID ou uma classe e, como todos os atributos, eles adicionam informações úteis aos elementos aos quais estão anexados.
Dependendo de qual atributo você adiciona a um elemento, você pode escrever um seletor CSS para aplicar o estilos visuais necessários para alcançar a aparência desse elemento e do site como um todo.
Embora os IDs ou as classes funcionem com o objetivo de vinculá-los às regras CSS, o design moderno da web os métodos favorecem classes em vez de IDs, em parte porque são menos específicos e mais fáceis de trabalhar em geral.
Uma ou mais classes em CSS?
Na maioria dos casos, você atribui um único atributo de classe a um elemento, mas na verdade não está limitado a apenas uma classe do jeito que está com IDs. Enquanto um elemento só pode ter um único atributo de ID, você pode dar a um elemento várias classes e, em alguns casos, isso tornará sua página mais fácil de estilizar e muito mais flexível.
Se você precisar atribuir várias classes a um elemento, adicione as classes adicionais e simplesmente separe-as com um espaço em seu atributo.
Por exemplo, este parágrafo tem três classes:
Este seria o texto do parágrafo
Isso define as três classes a seguir na tag de parágrafo:
- Pullquote
- Apresentou
- Deixou
Observe os espaços entre cada um desses valores de classe. Esses espaços são o que os configuram como classes diferentes e 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.left {... }
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 o semântica de um elemento - adicionar classes adicionais para definir o que esse elemento significa semanticamente. Esta abordagem é como Microformatos trabalho.
Vantagens de várias classes
A disposição de várias classes pode tornar mais fácil adicionar efeitos especiais a elementos sem ter que criar um estilo totalmente novo para esse elemento.
Por exemplo, para flutuar os elementos para a esquerda ou direita, você pode escrever duas classes:
deixou.
e.
direito.
com apenas.
flutuar: esquerda;
e.
flutuar: certo;
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 em que todos têm nomes de classe como "vermelho" ou "esquerdo", que são nomes que ditar como os elementos devem parecer, 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 com o 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.