¿Puedo usar clases CSS no existentes?
Tengo una tabla donde muestro / oculto una columna completa por jQuery a través de una clase CSS que no existe:
<table>
<thead>
<tr>
<th></th>
<th class="target"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="target"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="target"></td>
<td></td>
</tr>
</tbody>
</table>
Con este DOM puedo hacer esto en una línea a través de jQuery: $('.target').css('display','none');
Esto funciona perfectamente, pero ¿es válido usar clases CSS que no están definidas? ¿Debería crear una clase vacía para ella?
<style>.target{}</style>
¿Hay algún efecto secundario o hay una mejor manera de hacerlo?
13 answers
"clase CSS" es un nombre incorrecto; class es un atributo (o una propiedad, en términos de scripting) que se asigna a los elementos HTML. En otras palabras, declaras clases en HTML, no CSS, por lo que en tu caso la clase "target" de hecho existe en esos elementos específicos, y tu marcado es perfectamente válido tal como es.
Esto no significa necesariamente que necesite tener una clase declarada en el HTML antes de poder usarla en CSS tampoco. Véase el comentario de ruakh. Si un selector es valid depende completamente de la sintaxis del selector, y CSS tiene su propio conjunto de reglas para manejar errores de análisis, ninguna de las cuales concierne al marcado en absoluto. Esencialmente, esto significa que HTML y CSS son completamente independientes entre sí en el aspecto de validez.1
Una vez que entiendas eso, queda claro que no hay ningún efecto secundario de no definir una regla .target en tu hoja de estilo.2 Cuando asigna clases a sus elementos, puede hacer referencia a ellos elementos de esas clases en una hoja de estilos, un script o ambos. Ninguno de los dos depende del otro. En su lugar, ambos se refieren al marcado (o, más precisamente, su representación DOM). Este principio se aplica incluso si está utilizando JavaScript para aplicar estilos, como lo está haciendo en su jQuery one-liner.
Cuando escribes una regla CSS con un selector de clase, todo lo que estás diciendo es "Quiero aplicar estilos a los elementos que pertenecen a esta clase."Del mismo modo, cuando se escribe un script para recuperar elementos por un nombre de clase determinado, estás diciendo " Quiero hacer cosas con elementos que pertenecen a esta clase."Si hay o no elementos que pertenecen a la clase en cuestión es una cuestión completamente separada.
1Esta es también la razón por la que un selector de ID CSS coincide con todos los elementos con el ID dado, independientemente de de si el ID aparece exactamente una o varias veces (lo que resulta en un HTML no conforme documento).
2La única situación que conozco en la que una regla CSS vacía como esa es necesaria es cuando algunos navegadores se niegan a aplicar ciertas otras reglas correctamente como resultado de un error; la creación de una regla vacía hará que esas otras reglas se apliquen por alguna razón. Vea esta respuesta para un ejemplo de este error. Sin embargo, esto está en el lado CSS y por lo tanto no debería tener nada que ver con el marcado.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-20 09:10:57
No hay efectos malos para usar clases que no tengan estilos. De hecho, eso es parte de la utilidad de CSS es que está desacoplado del marcado y puede estilo o no estilo elementos/clases / etc. según sea necesario.
No piense en ellos como "clases CSS."Piense en ellos como" clases " que CSS pasa a utilizar también si es necesario.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-09 15:25:13
De acuerdo con la especificación HTML5 :
Un atributo de clase debe tener un valor que sea un conjunto de espacios separados tokens que representan las diversas clases a las que pertenece el elemento. ... No hay restricciones adicionales sobre los tokens que los autores pueden usar en el atributo class, pero se anima a los autores a usar valores que describir la naturaleza del contenido, en lugar de los valores que describen la presentación deseada del contenido.
También, en el versión 4:
El atributo class tiene varios roles en HTML:
- Como selector de hoja de estilo (cuando un autor desea asignar estilo información a un conjunto de elementos).
- Para el procesamiento de fines generales por agentes de usuario.
Su caso de uso cae en el segundo escenario, lo que lo convierte en un ejemplo legítimo de uso de un atributo de clase.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-10 01:25:26
Puede usar una clase que no tenga estilos, esto es HTML completamente válido.
Una clase referenciada en un archivo CSS no es una definición de una clase, se utiliza como una regla de selector para propósitos de estilo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-10 08:11:23
Cuando se utiliza un nombre de clase en JavaScript, no mira el CSS para encontrar esa clase. Se ve directamente en el código HTML.
Todo lo que se requiere es que el nombre de la clase esté en el HTML. No necesita estar en el CSS.
De hecho, muchas personas piensan que en realidad es una buena idea mantener clases separadas con CSS y Javascript, ya que permite a sus diseñadores y codificadores trabajar de forma independiente sin interponerse en el camino de los demás mediante el uso de cada uno otras clases.
(nota, el párrafo anterior es obviamente más aplicable para proyectos más grandes, así que no sientas que tienes que ir a este extremo si estás trabajando por tu cuenta; lo mencioné para hacer el punto de que los dos pueden estar completamente separados)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-11 07:59:55
Puede usar CSS clases sin usarlo, pero sugiero que si está agregando clases CSS solo para el código JavaScript/jQuery, prefije con él js-YourClassName para que los desarrolladores de front-end nunca usen estas clases para estilizar los elementos. Deben entender que estas clases se pueden eliminar en cualquier momento.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-11 14:45:38
En el momento en que agregue la Clase en su HTML, la Clase se definirá, por lo que su solución está completamente bien
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-09 15:25:14
No es necesario definir las clases CSS en su hoja de estilos. Debería funcionar bien. Sin embargo, agregarlo no hará daño.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-20 07:58:28
Una cosa que nadie aquí ha mencionado completamente es que JavaScript (ayudado por jQuery en este caso) no es capaz de modificar directamente la hoja de estilo en cascada de un documento. El método css() de jQuery simplemente cambia la propiedad style del conjunto de elementos coincidentes. CSS y JavaScript no están completamente relacionados en este aspecto.
$('.target').css('display','none'); no cambia su declaración CSS .target { } en absoluto. Lo que ha sucedido aquí en su lugar es que cualquier elemento con un class de "target" ahora se ve algo como esto:
<element class="target" style="display:none;"></element>
¿Hay algún efecto secundario causado por no definir previamente una regla de estilo CSS? Ninguno en absoluto.
¿Hay una mejor manera de hacer esto? En cuanto al rendimiento, ¡sí que lo hay!
¿Cómo se puede mejorar el rendimiento?
En lugar de modificar directamente el style de cada elemento, en su lugar puede predefinir una nueva clase y agregarla a sus elementos coincidentes utilizando addClass() (otro método jQuery).
¿Cómo podemos implementar esto nosotros mismos?
En primer lugar podemos añadir en nuestra nueva declaración CSS:
.hidden {
display: none;
}
Su HTML seguiría siendo el mismo, esta clase predefinida simplemente está en su lugar para su uso posterior.
Ahora podemos modificar el JavaScript para usar addClass() en su lugar:
$('.target').addClass('hidden');
Al ejecutar este código, en lugar de modificar directamente la propiedad style de cada uno de sus elementos "objetivo" coincidentes, esta nueva clase ahora se habrá agregado:
<element class="target hidden"></element>
Con la nueva clase "hidden", este elemento heredará el estilo declarado en su CSS y su elemento se configurará para que ya no se muestre.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-30 09:27:33
Como es mencionado por muchos otros, sí, el uso de clases sin CSS asignado es perfectamente válido y en lugar de pensar en ellos como 'clases CSS' simplemente debe reconocer la semántica de clase e ID para ser grupos y elementos individuales respectivamente.
Quería contribuir ya que sentía que un punto importante no se ha planteado dado el ejemplo. Si alguna vez necesita hacer manipulaciones visuales a una longitud variable de elementos (en este caso está utilizando filas de tabla), siempre hace sentido para reconocer que el costo de hacerlo a través de Javascript podría ser potencialmente muy caro (por ejemplo, si tiene miles de filas).
En esta situación, digamos que sabemos que la columna 2 siempre tiene el potencial de ocultarse (es una función consciente de su tabla), entonces tiene sentido diseñar un estilo CSS para manejar este caso de uso.
table.target-hidden .target { display: none; }
Entonces en lugar de usar JS para atravesar el DOM encontrando N elementos, simplemente necesitamos alternar una clase en una (nuestra tabla).
$("table").addClass("target-hidden")
Asignando a la tabla un ID esto sería aún más rápido e incluso podría simplemente referirse a la columna utilizando el selector :nth-child que reduciría su marcado aún más, pero no puedo comentar sobre la eficiencia. Otra razón para hacer esto es que odio el estilo en línea, y haré todo lo posible para erradicarlo!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-11 13:26:36
No tendrá ningún efecto si aplica una clase en un elemento HTML, y esa clase no está definida en CSS. Es una práctica común y, como dijo Aamir afridi, si está utilizando clases con el único propósito de js, es una buena práctica ponerles el prefijo js -.
No solo es válido para calses, sino también para el atributo id de elementos html.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-10 08:19:27
No hay ningún problema en el uso de clases solo para consultar elementos. Solía dar a estos nombres de clase el prefijo sys- (por ejemplo, nombraré su clase sys-target) para distinguirlos de las clases utilizadas para el estilo. Esta fue una convención utilizada por algunos desarrolladores de Microsoft en el pasado. También noté una práctica creciente de usar el prefijo js- para este propósito.
Si no se siente cómodo con el uso de clases para fines distintos del estilo, le recomiendo usar el Rol .js Plugin jQuery que le permite lograr el mismo propósito usando el atributo role, por lo tanto, puede escribir su marcado como <td role="target"> y consultarlo usando $("@target"). La página del proyecto tiene una buena descripción y ejemplos. Utilizo este plugin para grandes proyectos porque realmente me gusta mantener las clases solo con fines de estilo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-11 07:08:28
Consulte el motor de validación jQuery. Incluso allí también usamos clases inexistentes para agregar reglas de validación en los atributos HTML . Por lo tanto, no hay nada de malo en usar clases que no se declaran realmente en una hoja de estilo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-20 08:00:19