html - para - selectores css
¿Puedo usar clases de CSS no existentes? (13)
"Clase CSS" es un nombre inapropiado; class es un atributo (o una propiedad, en términos de scripting) que asigna a elementos HTML. En otras palabras, declara clases en HTML, no en CSS, por lo que, en su caso, la clase "objetivo" de hecho existe en esos elementos específicos, y su marca es perfectamente válida tal como es.
Esto no significa necesariamente que necesite tener una clase declarada en el HTML antes de poder usarla en CSS. Ver el comentario de ruaj. Si un selector es válido o no, depende completamente de la sintaxis del selector , y CSS tiene su propio conjunto de reglas para el manejo de errores de análisis , ninguno de los cuales se refiere 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 un efecto secundario de no definir una regla de .target en tu hoja de estilo. 2 Cuando asigne clases a sus elementos, puede hacer referencia a esos elementos por esas clases en una hoja de estilo, un script o ambos. Ninguno tiene dependencia del otro. En su lugar, ambos se refieren al marcado (o, más precisamente, a 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 escribe una regla CSS con un selector de clase, todo lo que dice es "Quiero aplicar estilos a los elementos que pertenecen a esta clase". De manera similar, cuando escribe un script para recuperar elementos por un determinado nombre de clase, está 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 un tema aparte.
1 Esta es también la razón por la que un selector de ID de CSS hace coincidir todos los elementos con la ID dada, independientemente de si la ID aparece exactamente una o varias veces (lo que resulta en un documento HTML no conforme).
2 La única situación que conozco donde es necesaria una regla de CSS vacía 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 algún motivo. Vea esta respuesta para un ejemplo de un error de este tipo. Sin embargo, esto está en el lado de CSS y, por lo tanto, no debería tener nada que ver con el marcado.
Tengo una tabla donde muestro / oculto una columna completa de 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? ¿Debo crear una clase vacía para ello?
<style>.target{}</style>
¿Hay efectos secundarios o hay una mejor manera de hacer esto?
Como lo mencionan muchos otros, sí, usar clases sin CSS asignado es perfectamente válido y, en lugar de pensar en ellas como "clases CSS", simplemente debe reconocer que la semántica de clase e ID son grupos y elementos individuales respectivamente.
Quería participar porque sentí que un punto importante no se había planteado en el ejemplo. Si alguna vez necesita realizar manipulaciones visuales en una longitud variable de elementos (en este caso, está usando filas de tablas), siempre tiene sentido reconocer que el costo de hacerlo a través de Javascript podría ser muy costoso (por ejemplo, si tiene miles de filas).
En esta situación, digamos que sabemos que la columna 2 siempre tiene el potencial de estar oculta (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; }
Luego, en lugar de usar JS para atravesar el DOM y encontrar N elementos, simplemente necesitamos alternar una clase en una (nuestra tabla).
$("table").addClass("target-hidden")
Al asignar 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 aún más su marca 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.
Cuando usas 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 clase esté en el HTML. No necesita estar en el CSS.
De hecho, muchas personas piensan que en realidad es philipwalton.com/articles/decoupling-html-css-and-javascript , ya que permite que sus diseñadores y programadores trabajen de forma independiente sin interponerse entre ellos al usar las clases de los demás.
(tenga en cuenta que el párrafo anterior es obviamente más aplicable para proyectos más grandes, así que no piense que tiene que ir a este extremo si está trabajando por su cuenta; lo mencioné para señalar que los dos pueden estar completamente separados. )
En el momento en que agregue la Clase en su HTML, se definirá la Clase, por lo que su solución estará completamente bien.
No es necesario definir clases de CSS en su hoja de estilos. debería funcionar bien. Sin embargo, añadiendo que no hará daño.
No hay efectos adversos al usar clases que no tienen estilos. De hecho, eso es parte de la utilidad de CSS, es que está desligado de la marca y puede diseñar o no elementos de estilo / clases / etc. según sea necesario.
No pienses en ellas como "clases de CSS". Piense en ellos como "clases" que CSS también usa si es necesario.
No hay ningún problema en usar clases para solo buscar elementos. Solía dar a estos nombres de clase el prefijo sys-target (por ejemplo, nombraré a tu 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 cada vez mayor de usar el prefijo js- para este propósito.
Si no está Role.js con el uso de clases para otros fines que no sean el estilo, le recomiendo que use el complemento Role.js jQuery, que le permite lograr el mismo propósito utilizando el atributo role , por lo tanto, puede escribir su marca como <td role="target"> y pregúntelo usando $("@target") . La página del proyecto tiene una buena descripción y ejemplos. Utilizo este complemento para grandes proyectos porque realmente me gusta mantener las clases solo con fines de estilo.
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 las clases con el único propósito de js, es una buena práctica prefijarlas con js-.
No solo es válido para calsses, sino también para el atributo id de los elementos html.
Puede usar clases CSS sin usarlo, pero le sugiero que si está agregando clases CSS solo para el código JavaScript / jQuery, js-YourClassName para que los desarrolladores front-end nunca utilicen estas clases para js-YourClassName los elementos. Deben entender que estas clases se pueden eliminar en cualquier momento.
Puedes usar una clase que no tiene estilos, este es un HTML completamente válido.
Una clase a la que se hace referencia en un archivo CSS no es una definición de una clase, se usa como una regla de selección para propósitos de estilo.
Según la especificación HTML5 :
Un atributo de clase debe tener un valor que sea un conjunto de tokens separados por espacios 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 de clase, pero se recomienda a los autores que usen valores que describan la naturaleza del contenido, en lugar de valores que describan la presentación deseada del contenido.
Además, en la versión 4 :
El atributo de clase tiene varios roles en HTML:
- Como selector de hojas de estilo (cuando un autor desea asignar información de estilo a un conjunto de elementos).
- Para el procesamiento de propósito general por los agentes de usuario.
Su caso de uso se incluye en el segundo escenario, lo que lo convierte en un ejemplo legítimo de usar un atributo de clase.
Una cosa que nadie aquí ha mencionado completamente es que JavaScript (ayudado por jQuery en este caso) no puede modificar directamente la hoja de estilo en cascada de un documento. El método css() jQuery simplemente cambia el conjunto de propiedades de style de los elementos. CSS y JavaScript están completamente sin relación en este aspecto.
$(''.target'').css(''display'',''none''); no cambia su .target { } CSS en absoluto. Lo que sucedió aquí, en cambio, es que cualquier elemento con una class de "objetivo" ahora se ve algo como esto:
<element class="target" style="display:none;"></element>
¿Hay efectos secundarios causados por no definir previamente una regla de estilo CSS? Ninguno en absoluto.
¿Hay una mejor manera de hacer esto? En cuanto al rendimiento, sí 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).
En base a este JSPerf preexistente que compara css() con addClass() , podemos ver que addClass() es en realidad mucho más rápido:
¿Cómo podemos implementar esto nosotros mismos?
En primer lugar podemos agregar en nuestra nueva declaración CSS:
.hidden {
display: none;
}
Su HTML seguirá siendo el mismo, esta clase predefinida está simplemente en su lugar para su uso posterior.
Ahora podemos modificar el JavaScript para usar addClass() lugar:
$(''.target'').addClass(''hidden'');
Al ejecutar este código, en lugar de modificar directamente la propiedad de style de cada uno de los elementos de "destino" coincidentes, ahora se habrá agregado esta nueva clase:
<element class="target hidden"></element>
Con la nueva clase "oculta", este elemento heredará el estilo declarado en su CSS y su elemento se configurará para dejar de mostrarse.