Saliendo del último punto y coma de un bloque CSS

Un par de preguntas sobre esto:

  • ¿Es una buena práctica?
  • ¿Tendrá, en gran escala, mejores tiempos de carga?
  • ¿Puede ocasionar que los navegadores se “quiebren”?
  • ¿Es lo mismo para la última función en Javascript (/ jQuery)?

Lo que quiero decir es cosas como esta:

#myElement { position: absolute; top: 0; left: 0 } 

    ¿Es una buena práctica?

    No es una buena práctica excluir manualmente los puntos y coma. Esto se debe simplemente a que es fácil pasar por alto al agregar más estilos, especialmente si trabaja en equipo:

    Imagina que comienzas con:

     .foo { background-color: #F00; color: #000 < -- missing semi-colon } 

    Y luego alguien agrega algunos estilos:

     .foo { background-color: #F00; color: #000 < -- missing semi-colon width: 30px; z-index: 100; } 

    De repente, el otro desarrollador está perdiendo el tiempo averiguando por qué su statement de width no está funcionando (o peor aún, no se da cuenta de que no está funcionando). Es más seguro dejar los puntos y comas en

    ¿Tendrá, en gran escala, mejores tiempos de carga?

    Definitivamente, por cada bloque, ahorrarías un par de bytes. Estos se sumn, especialmente para las hojas de estilo grandes. En lugar de preocuparse por estas ganancias de rendimiento usted mismo, es mejor usar un compresor CSS, como el compresor YUI para eliminar automáticamente los puntos y comas finales para usted.

    ¿Puede ocasionar que los navegadores se "quiebren"?

    No, es seguro, ya que los navegadores implementan esta parte de la especificación correctamente. La especificación CSS2 define una statement así:

    Una statement está vacía o consta de un nombre de propiedad, seguido de dos puntos (:), seguido de un valor de propiedad.

    Más importante:

    ... las declaraciones múltiples para el mismo selector se pueden organizar en grupos separados por punto y coma (;).

    Esto significa que ; se usa para separar declaraciones múltiples, pero no es necesario para terminarlas.

    ¿Es lo mismo para la última función en Javascript?

    JavaScript es una bestia completamente diferente con una especificación completamente diferente. Esta pregunta en particular ha sido respondida en profundidad muchas veces antes en Stack Overflow .

    • No, dejando de lado que el punto y coma introducirá una gran cantidad de riesgo en su aplicación, será demasiado fácil pasar por alto su adición si agrega más estilos a su elemento. En ese punto, confía en sus procesos manuales y atención a los detalles para asegurarse de que no haya extraviado accidentalmente sus líneas que no son de punto y coma. Peor aún, tendría que comprobar físicamente su archivo css cada vez que estuviera listo para pasar a la producción para asegurarse de no arruinar ninguna de las líneas de estilo definitivas en cada elemento.

    • Posiblemente, dado que el archivo sería más pequeño, pero la diferencia debería ser insignificante. Si le preocupan los tiempos de carga, la compresión de sus archivos antes de colocarlos en el servidor le servirá bien.

    • La mayoría de los navegadores son lo suficientemente inteligentes como para saber a qué te refieres, pero aún tienes que preocuparte por arruinar tu archivo CSS al no tener cuidado con el último estilo.

    • ¿Es una buena práctica?

    En mi opinión, no. Si agrega una regla debajo de la última regla, es fácil olvidarse de agregar el punto y coma.

    • ¿Tendrá, en gran escala, mejores tiempos de carga?

    No puedo imaginar que suponga una gran diferencia en el tiempo de carga.

    • ¿Puede ocasionar que los navegadores se “quiebren”?

    No, solo se requiere el punto y coma para separar las reglas en bloques CSS. Los puntos y coma son delimitadores, no terminadores.

    • ¿Es lo mismo para la última función en Javascript (/ jQuery)?

    Sí, no deje el intérprete de JavaScript para agregar punto y coma.

    Mejorará el tiempo de carga muy ligeramente. Con un archivo CSS lo suficientemente grande, incluso se puede notar (bueno, la minificación en general puede ser, dudo que eliminar el punto y coma final sea suficiente).

    Sin embargo, si te preocupas tanto por los tiempos de carga, deberías estar usando un progtwig para minimizar tu CSS, sin intentar hacerlo manualmente. CSS reducido es (casi) imposible de leer. Es una mala práctica usar esto en el “código fuente”, por así decirlo, porque es muy fácil olvidarlo.

    Esta es una pregunta duplicada. Mira aquí:

    Semicolon en CSS

    En cuanto a la aplicación de un punto y coma en JavaScript, las funciones no deben terminar con punto y coma a menos que estén asignadas de forma declarativa, es decir. var a = function() {}; Sin embargo, los navegadores realizan una inserción automática de punto y coma si accidentalmente (o deliberadamente) los omite.

    La eliminación de las paradas de statement no “romperá” los navegadores, pero debería dejarse para los minificadores automáticos (especialmente si le preocupan los tiempos de carga, los puntos y coma por sí solos no sumn mucho) pero debe evitarse en la fuente por motivos de mantenimiento.

    Si busca las mejores prácticas, las reglas de formato de CSS en la guía de estilo de Google css son un muy buen lugar para comenzar, no para aplicar ciegamente su sugerencia, sino para ver su razonamiento detrás de ella.

    Use un punto y coma después de cada statement. Termine cada statement con un punto y coma por razones de coherencia y extensibilidad.

     /* Not recommended */ .test { display: block; height: 100px } /* Recommended */ .test { display: block; height: 100px; } 

    Sin embargo, Javascript es una historia diferente: la respuesta corta siempre es usar punto y coma, nunca depender de la inserción implícita , pero nunca he visto una respuesta mejor y más completa que la prescrita por Google en otra guía de estilo de la suya :

    Hay un par de lugares donde los puntos y comas faltantes son particularmente peligrosos:

     // 1. MyClass.prototype.myMethod = function() { return 42; } // No semicolon here. (function() { // Some initialization code wrapped in a function to create a scope for locals. })(); var x = { 'i': 1, 'j': 2 } // No semicolon here. // 2. Trying to do one thing on Internet Explorer and another on Firefox. // I know you'd never write code like this, but throw me a bone. [normalVersion, ffVersion][isIE](); var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here. // 3. conditional execution a la bash -1 == resultOfOperation() || die(); 

    ¿Así que lo que ocurre?

    1. Error de JavaScript: primero se llama a la función que retorna 42 con la segunda función como parámetro, luego se “llama” al número 42 y se produce un error.
    2. Lo más probable es que obtenga un error de “no existe dicha propiedad en indefinido” en el tiempo de ejecución cuando intenta llamar a x[ffVersion][isIE]() .
    3. se llama a menos que resultOfOperation() sea NaN y THINGS_TO_EAT se le asigne el resultado de die() .

    ¿Por qué?

    JavaScript requiere que las declaraciones terminen con un punto y coma, excepto cuando cree que puede inferir con seguridad su existencia. En cada uno de estos ejemplos, se usa una statement de función u objeto o literal de matriz dentro de una instrucción. Los corchetes de cierre no son suficientes para señalar el final de la statement. Javascript nunca termina una statement si el siguiente token es un infijo o operador de corchetes.

    Esto realmente ha sorprendido a la gente, así que asegúrese de que sus tareas terminen con punto y coma.

    ¿Es una buena práctica?

    La mayoría de las respuestas aquí dicen que no. Estoy totalmente de acuerdo: con el formato tradicional de CSS, un punto y coma omitido es demasiado fácil de pasar por alto. Pero no tiene que ser así.

    Algunas palabras sobre JavaScript

    En el mundo extraño de JavaScript, si dejas una coma después del último elemento en una lista de parámetros de literal, de objeto o de parámetro de función, ocurren cosas mortales sin previo aviso.

     thisIsAlright = { one: "one", two: "two", three: "three", four: "four" } thisIsWrong = { one: "one", two: "two", three: "three", four: "four", } // It normally takes a second or two to spot the mistake. Easy to overlook. itsHardToGetThisWrong = { one: "one" , two: "two" , three: "three" , four: "four" } 

    Existe una convención popular llamada “el estilo de coma primero” que trata elegantemente este problema. Como beneficio adicional, si usas un VCN como Git, obtienes “clean diffs” usando esta convención. Muchas personas (yo incluido) lo ven no solo como más robusto, sino también como más legible.

    Volver a CSS

    La razón principal para el estilo de coma primero es irrelevante para CSS. Pero si quiere omitir el último punto y mantener su código a salvo de errores humanos, será mejor que lo siga. Se vería así:

     #myElement { position: absolute ; top: 0 ; left: 0 } 

    ¿Es una buena práctica?

    Me rehusaría a hacerlo, ya que un proceso de minificación inteligente se encargará de esto e introduciría errores si olvidó colocar el punto y coma al agregar nuevas definiciones.

    ¿Tendrá, en gran escala, mejores tiempos de carga?

    Sí, un tamaño de archivo más pequeño. Sin embargo, la diferencia es insignificante y los procesos de minificación lo harán automáticamente.

    ¿Puede ocasionar que los navegadores se “quiebren”?

    No

    ¿Es lo mismo para la última función en Javascript (/ jQuery)?

    No, sería “inválido” excluir los puntos y comas al final de una statement de función.

    De acuerdo con mi experiencia, 1) No es una buena práctica 2) Incluso en una escala muy grande, los tiempos de carga serán insignificantes. 3) No estoy al tanto de ningún navegador que pueda romper con esto. 4) Lo mismo ocurre con jQuery

    Para CSS, probé esto en IE9, FF, GC, Safari y Opera, y no hizo la diferencia.

    En cuanto a Javascript, recibí un error en FF y GC, así que diría que no hagas esto en las secuencias de comandos. En cuanto al tiempo de carga, la diferencia no será notable de ninguna manera.