Cascading Style Sheets (CSS) permite que você defina a aparência de um elemento conectando-se aos atributos que você aplica a esse elemento. Esses atributos podem ser um ID e uma classe e, como todos os atributos, eles adicionam informações úteis aos elementos aos quais estão vinculados.
Dependendo de qual atributo você adicionar a um elemento, você pode escrever um seletor de CSS para aplicar os estilos visuais necessários que são necessários para obter a aparência desse elemento e do site como um todo.
Embora os IDs ou as classes funcionem com o objetivo de incluir regras CSS, os métodos modernos de design da Web favorecem as classes sobre IDs, em parte porque são menos específicas e mais fáceis de serem trabalhadas com o geral. Sim, você ainda encontrará muitos sites que usam IDs, mas esses atributos estão sendo aplicados com mais parcimônia do que no passado, enquanto as classes assumiram as páginas da Web modernas.
Classes Únicas ou Múltiplas em CSS?
Na maioria dos casos, você atribui um único atributo de classe a um elemento, mas na verdade você não está limitado a apenas uma classe do jeito que você está com os 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, poderá adicionar as classes adicionais e simplesmente separá-las com um espaço no 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
- Destaque
- Esquerda
Observe os espaços entre cada um desses valores de classe. Esses espaços são o que os configura como classes individuais e diferentes. É também por isso que os nomes de classe não podem ter espaços, porque isso os configuraria como classes separadas. Por exemplo, se você usou "pullquote-featured-left" sem um espaço, seria um valor de classe, mas o exemplo acima, onde essas três palavras são separadas por um espaço, as define como valores individuais. É importante entender esse conceito quando você decide quais valores de classe usar em suas páginas da Web.
Depois de ter seus valores de classe em HTML, você poderá atribuí-los como classes em seu CSS e aplicar os estilos que deseja adicionar. Por exemplo.
.pullquote {…}.destaque { … }p.left {…}
Nestes exemplos, os pares de declarações e valores CSS estariam 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.left), 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.left O estilo só se aplica a parágrafos com essa classe, já que seu seletor está realmente dizendo para aplicá-lo a "parágrafos com um valor de classe de 'left'". Por outro lado, os outros dois seletores no exemplo não especificam um determinado elemento, portanto, eles se aplicam a qualquer elemento que use esses valores de classe.
Vantagens de várias classes
Várias classes podem facilitar a adição de efeitos especiais aos elementos sem precisar criar um novo estilo para esse elemento.
Por exemplo, você pode querer ter a capacidade de flutuar elementos à esquerda ou direita rapidamente. Você pode escrever duas classes
esquerda e
certo com apenas
float: esquerda; e
flutuar: certo; neles. Então, sempre que você tivesse um elemento que precisasse flutuar à esquerda, você simplesmente adicionaria a classe "left" à sua lista de classes.
Há uma linha fina para caminhar aqui, no entanto. Lembre-se de que os padrões da web ditam a separação de estilo e estrutura. Estrutura é tratada via HTML enquanto o estilo está em CSS. Se o seu documento HTML for preenchido com elementos que tenham nomes de classe como "vermelho" ou "esquerdo", que são nomes que determinam como os elementos devem ser e não o que são, você está cruzando a linha entre estrutura e estilo. Eu tento limitar meus nomes de classes não-semânticas, tanto quanto possível por esse motivo.
Múltiplas Classes, Semântica e JavaScript
Outra vantagem de usar várias classes é que ela oferece muito mais possibilidades de interatividade.
Você pode aplicar 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. Isso significa que você pode adicionar classes adicionais para definir o que esse elemento significa semanticamente. É assim que funciona o Microformats.
Desvantagens de várias classes
A maior desvantagem do uso de várias classes em seus elementos é que elas podem torná-las um pouco difíceis de controlar e gerenciar com o tempo. Pode ser difícil determinar quais estilos estão afetando um elemento e se algum script o está impactando. Muitas das estruturas disponíveis hoje, como o Bootstrap, fazem uso pesado de elementos com várias classes. Esse código pode ficar fora de mão e difícil de trabalhar com muito rapidez se você não for cuidadoso.
Quando você usa várias classes, você também corre o risco de ter o estilo para uma classe substituir o estilo de outra, mesmo que você não tenha a intenção para isso. Isso pode tornar difícil descobrir por que seus estilos não estão sendo aplicados, mesmo quando parece que deveriam. Você precisa estar ciente da especificidade, mesmo com os atributos aplicados a esse elemento!
Ao usar uma ferramenta como as do Google para webmasters, você pode ver com mais facilidade como suas classes estão afetando seus estilos e evitar esse problema de estilos e atributos conflitantes.
