2010-11-30 13 views
56

He visto esta notación utilizada mucho, y me preguntaba, ¿hay alguna diferencia notable entre estas dos notaciones?'propiedad: 0' o 'propiedad: 0px' en CSS?

element#id 
{ 
    property: 0; 
} 

y

element#id 
{ 
    property: 0px; 
} 

utilizo property: 0px; todo el tiempo, ya que me resulta más limpio buscando, pero no estoy muy seguro de si el navegador interpreta de manera diferente que 0px0.

¿Alguien sabe cuál es mejor o más correcto?

+1

Buena pregunta, y antes de esto probables duplicado: http://stackoverflow.com/q/5359222/292060, pero esa tiene una mejor respuesta, citando la especificación . – goodeye

+1

Cualquiera que sea su uso, asegúrese de mantenerse constante durante todo el proyecto. – testing123

Respuesta

17

Mientras que la unidad es opcional cuando el valor es 0, tiendo a dejarlo en, como ya continuación, puede ajustar los valores con de Chrome Developer Tools 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 las unidades de los valores 0 de todos modos, por lo que en realidad no importará al final.

+0

+1 para observar que los minificadores saben de esto, y que hay funcionalidad que se tiene incluyéndolos. –

+4

Chrome's Developer Tools se establece de manera 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 baja a 0, mantiene el px. – testing123

+0

@ testing123: No creo que lo haya hecho en el momento en que escribí esta respuesta, pero es bueno saberlo. – Blender

14

Son lo mismo. El navegador interpreta ambos como 0, así que ve con lo que sea más legible para ti.

+0

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

+1

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

+0

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

2

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

+0

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

1

Personalmente encuentro 0 limpiador que 0px. Son dos caracteres adicionales que pueden sumarse. ¿Por qué agregar bytes adicionales cuando no es necesario? He visto padding: 0px 0px 0px 0px que se puede expresar fácilmente como padding: 0 con demasiada frecuencia.

7

Cero de nada es cero. 0px = 0% = 0em = 0pt = 0

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

+1

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

4

Por lo que 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 corporativa que debe seguir, por supuesto).

De la mayoría de las muestras de código que he visto, la mayoría de las personas usan la versión sin unidades. Para mí, simplemente se ve más limpio. Si está generando una gran cantidad de datos (por ejemplo, si es Google), esos dos bytes pueden sumar mucho ancho de banda, especialmente dado que es muy probable que los repita varias veces en su hoja de estilo.

+4

Si está presionando una gran cantidad de datos (como si fuera Google), es mejor que esté usando herramientas de minificación que hacen esto por usted: p –

0

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

36

identificadores de unidad son opcional, pero no hay un aumento de rendimiento notable (aunque son ahorro de dos caracteres).

Según la W3C CSS 2.1 Specification for Syntax and basic data types:

El formato de un valor de longitud (denotado por <longitud> en esta memoria descriptiva) es un < número > (con o sin un punto decimal) seguido inmediatamente por un identificador de la unidad (por ejemplo, px, em, etc.). Después de una longitud cero, el identificador de la unidad es opcional.

(El énfasis es mío)

+1

Duda que realmente ahorre 2 bytes cuando la compresión GZIP está activa. Es una cuestión de para qué te sientes cómodo conmigo. Algunos CSS Linters pueden no gustarle 0px, sin embargo. –

1

Puede usar cualquiera de mis dos consejos: no se preocupe demasiado, pero sea consecuente al hacerlo de una forma u otra. Prefiero personalmente para especificar '0px' por las siguientes razones:

  • Usando 0px hace las cosas más consistente con todos los demás 'px' tamaños que haya especificado
  • También es más detallado y hace que sea muy clara que se está configurando una longitud cero en lugar de un 'conmutador esto adelante' bandera
  • es un poco más fácil de ajustar un valor '0px que los pongan a otro valor si es necesario
Cuestiones relacionadas