¿'propiedad: 0' o 'propiedad: 0px' en CSS?


86

He visto que esta notación se usa mucho, y me preguntaba si hay alguna diferencia notable entre estas dos notaciones.

element#id
{
  property: 0;
}

y

element#id
{
  property: 0px;
}

Lo uso property: 0px;todo el tiempo, ya que lo encuentro más limpio, pero no estoy realmente seguro de si el navegador interpreta de manera 0pxdiferente a 0.

¿Alguien sabe cuál es mejor o correcto?


1
Buena pregunta, y antes de este probable duplicado: stackoverflow.com/q/5359222/292060 , pero esa tiene una mejor respuesta, citando la especificación.
goodeye

1
Independientemente de lo que use, asegúrese de mantener la coherencia durante todo el proyecto.
PBwebD

Respuestas:


56

Los identificadores de unidad son opcionales , pero no se nota un aumento de rendimiento (aunque está guardando dos caracteres).

CSS2 - De W3C CSS 2.1 Especificación de la sintaxis y los tipos de datos básicos :

El formato de un valor de longitud (indicado por <length> en esta especificación) es un <number> (con o sin un punto decimal) seguido inmediatamente por un identificador de unidad (por ejemplo, px, em, etc.). Después de una longitud cero, el identificador de la unidad es opcional.

(Énfasis mío)

CSS 3 - A partir de los valores de CSS del W3C y Unidades Módulo Nivel 3 (Actualmente en la Recomendación candidato en el momento de escribir estas líneas)

Para longitudes cero, el identificador de la unidad es opcional (es decir, puede representarse sintácticamente como 0).


1
Dudo que realmente ahorres 2 bytes cuando la compresión GZIP está activa. Para mí, es una cuestión de con qué te sientes cómodo. Sin embargo, a algunos CSS Linters no les gusta 0px.
Manuel Arwed Schmidt

34

Si bien la unidad es opcional cuando el valor es 0, tiendo a dejarlo, ya que luego puedo modificar los valores con las herramientas de desarrollo de Chrome haciendo clic en el valor y presionando las teclas de flecha arriba / abajo. Sin una unidad, eso no es realmente posible.

Además, los minificadores de CSS eliminan los 0valores de las unidades de todos modos, por lo que al final no importará.


+1 por observar que los minificadores saben sobre esto, y que hay una funcionalidad que se puede tener al incluirlos.
Graham P Heath

9
Las herramientas de desarrollo de Chrome se establecen de forma predeterminada en px si presiona las teclas de flecha arriba / abajo en un 0 sin un identificador. Además, en las Herramientas para desarrolladores de Chrome, si la flecha hacia abajo hasta 0, mantiene el px.
PBwebD

1
@ testing123: No creo que fuera así en el momento en que escribí esta respuesta, pero es bueno saberlo.
Blender

¿Habrá problemas de tiempo de ejecución con 0 y 0px si se utilizan en varios lugares de la aplicación?
Kurkula

15

Ellos son iguales. El navegador interpreta ambos como 0, así que elija lo que sea más legible para usted.


¿Existe una opción "correcta" o que cumpla con los estándares? Sé que no se puede escribir border: 3 solid, ya que no hay unidades, pero ¿hay estándares web en cero?
Blender

1
Como menciono en mi respuesta, es porque todos son idénticos: cero multiplicado por cualquier cosa sigue siendo cero, ya sea que esté multiplicando por el tamaño de un píxel, un em, un ex o por porcentaje.
AgentConundrum

No estoy seguro de lo que quiere decir con estándares web, pero "margin: 10px 0 0 10px" funciona bien, al igual que "border: 0", lo que significa que puede usar cero como equivalente de "ninguno".
Tom

1
@blender Verifique mi respuesta a continuación para conocer los estándares web con un enlace a la documentación.
Chris Bier

3
-1 para una respuesta con contenido discutible sin ninguna referencia, enlaces o justificación. respalde su opinión con datos o indique claramente que es solo su opinión, no información fáctica.

11

Cero de cualquier cosa es cero. 0px= 0%= 0em= 0pt=0

La mayoría de la gente deja la unidad apagada porque es simplemente un desorden innecesario.


1
Una excepción son las unidades de tiempo: 0no es una alternativa válida a 0s/0ms
Henrik Christensen

5

Hasta donde yo sé, no hay diferencia entre ellos, ya que 0px = 0em = 0ex = 0% = 0. Depende exclusivamente de usted, como desarrollador, decidir qué le gusta más (a menos que tenga estándares de codificación corporativos que deba seguir, por supuesto).

De la mayoría de los ejemplos de código que he visto, la mayoría de la gente usa la versión sin unidades. Para mí, parece más limpio. Si está impulsando una cantidad significativa de datos (por ejemplo, si es Google), esos dos bytes pueden sumar una gran cantidad de ancho de banda, especialmente porque es muy probable que los repita varias veces en su hoja de estilo.


6
Si está impulsando una cantidad significativa de datos (como si fuera Google), es mejor que utilice herramientas de minificación que hagan esto por usted: p
John Kurlak

4

Cero píxeles es igual a cero pulgadas y cero metros y así sucesivamente. 0es todo lo que necesitas.


Por un momento, iba a rechazar tu publicación porque pensaba que tu afirmación de que 0 píxeles es igual a 0 pulgadas, y así sucesivamente era falsa. :) Porque en mi mente estaba pensando ¿cómo puede ser eso? son unidades diferentes.
Web_Designer

2

Personalmente me parece 0más limpio que 0px. Son dos personajes adicionales que se pueden sumar. ¿Por qué agregar bytes adicionales cuando no es necesario? He visto padding: 0px 0px 0px 0pxcuál puede expresarse fácilmente como padding: 0demasiado a menudo.


1

Puede usar cualquiera de los dos; mi mejor consejo es que no se preocupe demasiado, sino que sea constante al hacerlo de una forma u otra. Personalmente, prefiero especificar '0px' por las siguientes razones:

  • El uso de 0px hace que las cosas sean más consistentes con todos los otros tamaños de 'px' que ha especificado
  • También es más detallado y deja muy claro que está estableciendo una longitud cero en lugar de una bandera de 'apagar esto'
  • Es un poco más fácil modificar un valor de '0px' para convertirlo en otro valor si es necesario

0

Como dicen los demás, realmente no importa si es 0, aunque elijo agregar las medidas a todos mis valores para que cualquier otra persona que mire mis archivos CSS pueda medir qué medidas es probable que manejen en otro lugar.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.