Non se limita a unha única clase CSS por elemento.
As Follas de estilo en cascada (CSS) permítenlle definir a aparencia dun elemento enganchando os atributos que aplica a ese elemento. Estes atributos poden ser ID e unha clase e, como todos os atributos, engaden información útil aos elementos aos que están unidos. Dependendo do atributo que engada a un elemento, pode escribir un selector CSS para aplicar os estilos visuais necesarios para lograr o aspecto dese elemento e do sitio web no seu conxunto.
Mentres tanto as IDs ou as clases funcionan co propósito de conectar con elas as regras CSS, os métodos modernos de deseño web favorecen as clases por encima dos ID, en parte, porque son menos específicos e máis fáciles de traballar globalmente. Si, aínda atoparás moitos sitios que usan IDs, pero estes atributos aplícanse de forma máis escasa que no pasado mentres que as clases tomaron as páxinas web modernas.
Clases simples ou múltiples en CSS?
Na maioría dos casos, asignarías un atributo de clase única a un elemento, pero en realidade non se limita a unha única clase como estás con ID. Aínda que un elemento só pode ter un único atributo de identificación, pode dar absolutamente un elemento a varias clases e, nalgúns casos, facelo facilitará a súa páxina ao estilo e será moito máis flexible.
Se precisa asignar varias clases a un elemento, pode engadir as clases adicionais e simplemente separarlas cun espazo no seu atributo.
Por exemplo, este parágrafo ten tres clases:
pullquote featured left "> Este sería o texto do parágrafo
Isto establece as seguintes tres clases na etiqueta do parágrafo:
- Puxado
- Destacado
- Esquerda
Observe os espazos entre cada un destes valores de clase. Eses espazos son os que os configuran como clases diferentes e individuais. Tamén é por iso que os nomes de clase non poden ter espazos neles, porque facelo configuralas como clases separadas.
Por exemplo, se usou "pullquote-featured-left" sen un espazo, sería un valor de clase, pero o exemplo anterior, onde estas tres palabras están separadas cun espazo, as configura como valores individuais. É importante comprender este concepto cando decides que valores de clase usar nas túas páxinas web.
Unha vez que teña os seus valores de clase en HTML, entón pode asignalos como clases no seu CSS e aplicar os estilos que desexa engadir. Por exemplo.
.pullquote {...}
.featured {...}
p.left {...}
Nestes exemplos, as parellas de declaracións e valores de CSS estarían dentro das teclas curvadas, de modo que estes estilos aplicaríanse ao selector axeitado.
Nota: se configura unha clase para un elemento específico (por exemplo, p.left), aínda pode usalo como parte dunha lista de clases; Con todo, teña en conta que só afectará os elementos especificados no CSS. Noutras palabras, o estilo p.left só se aplicará aos parágrafos con esta clase xa que o seu selector realmente está dicindo que o aplique a "parágrafos cun valor de clase de" esquerda ". Pola contra, os outros dous selectores do exemplo non especifican un determinado elemento, polo que se aplican a calquera elemento que use eses valores de clase.
Vantaxes de clases múltiples
Múltiples clases poden facer máis doado engadir efectos especiais a elementos sen ter que crear un estilo completamente novo para ese elemento.
Por exemplo, pode querer ter a capacidade de flotar elementos á esquerda ou á dereita rapidamente. Pode escribir dúas clases á esquerda e á dereita con só flotar: esquerda; e flotante: certo; neles. Entón, sempre que tiña un elemento que precisa flotar á esquerda, simplemente engadiría a clase "esquerda" á súa lista de clases.
Non obstante, existe unha boa liña para camiñar. Lembre que as normas web dictan a separación do estilo e da estrutura. A estrutura manéxase a través de HTML mentres o estilo está en CSS.
Se o seu documento HTML está cheo de elementos que teñen nomes de clase como "vermello" ou "esquerda", que son nomes que determinan como deben ollarse os elementos en lugar do que son, está atravesando esa liña entre estrutura e estilo. Intento limitar o meu nome de clase non semántica tanto como sexa posible por este motivo.
Múltiples clases, semántica e JavaScript
Outra vantaxe de usar varias clases é que lle ofrece moitas máis posibilidades de interactividade.
Pode aplicar novas clases a elementos existentes usando JavaScript sen eliminar ningunha das clases iniciais. Tamén pode usar clases para definir a semántica dun elemento . Isto significa que pode engadir clases adicionais para definir o que significa semánticamente. Así funciona o Microformato.
Desvantaxes de varias clases
A maior desvantaxe do uso de varias clases nos teus elementos é que poden facelo un pouco difícil de mirar e xestionar ao longo do tempo. Pode chegar a ser difícil determinar que estilos afectan un elemento e se hai scripts que o están afectando. Moitos dos cadros dispoñibles hoxe en día, como Bootstrap, fan uso intensivo de elementos con varias clases. Ese código pode saír da man e traballar con moito rapidez se non ten coidado.
Cando usa varias clases, tamén corre o risco de que o estilo dunha clase elimine o estilo doutro aínda que non teña intención de facelo. Isto pode facer que sexa difícil descubrir por que os seus estilos non se están a aplicar aínda que pareza que deberían.
Debe ter en conta a especificidade, mesmo cos atributos aplicados a ese elemento.
Ao usar unha ferramenta como as ferramentas de administrador web en Chrome, podes ver máis facilmente como as túas clases están afectando os teus estilos e evitar este problema de estilos e atributos en conflito.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 17/08/17