Errores de tipeo y olvidos al escribir Css y sus consecuencias 2.5.15

Errores de tipeo y olvidos al escribir Css y sus consecuencias

Algo muy común al escribir, sea lo que sea que escibas, es cometer algún error de los conocidos como de "tipeo". Esto es, alterar el orden de algún carácter, comerte o repetir algún otro...

Normalmente este tipo de errores no suele tener mayor transcendencia.El mensaje suele ser igual de comprensible con el error que sin él.

Pero esto cambia cuando estás usando un lenguaje formal y estructurado, como los de programación, donde todo está reglado. En estos casos los "simples" errores de escritura dejan de serlo y tienen efecto inmediato en el resultado final.

En Css también. Los errores se pagan. Pero no por igual. Dependiendo qué tipo de error sea y dónde se produzca las consecuencias pueden ser de lo más dispar: desde anularse una sola declaración a anularse todo el resto de la hoja de estilos.

Error en el selector

Si es un único selector anula toda la regla, pues no encuentra en el html a quién aplicarla.

Si son varios o un selector compuesto dependerá de dónde sea el error para que afecte a todos, una par de ellos o termine afectando a un elemento del html no deseado

Si olvidas el corchete de apertura { del bloque de declaraciones anula esa regla y la siguiente.

Si olvidas el corchete de cierre } del bloque de declaraciones anula a todo el css siguiente que haya tras el punto donde debería haberse cerrado la regla.

Errores en la declaración Css

Si el error está en el nombre de la propiedad, omisión de los dos puntos : o en el nombre, tipo de valor o unidad del valor dicha declaración se invalida.

Si es en el punto y coma ; de separación entre dos declaraciones ambas quedan anuladas.

En propiedades que admiten múltiples valores separados por comas la omisión de una de ellas cuando da lugar a un valor no permitido o inválido la declaración se anula.

Error en la sintaxis del comentario Css

Si es en el cierre del comentario */ anula todo hasta encontrar un cierre de comentario bien formado y si no lo encuentra adiós al resto de la hoja de estilos hasta el final del documento.

Si el olvido es en la apertura /* del comentario y está entre reglas, anula toda la regla que le sigue hasta su cierre de corchete }.

Si el olvido es en la apertura /* del comentario y el comentario está dentro de una regla y entre declaraciones (después del ;) anula la declaración que le sigue (la que está junto con él entre un ; y el siguiente) pues se traduce en un nombre de propiedad inválido.

Si el comentario está está antes del punto y coma de la declaración ; (a continuación del valor) y olvidas su apertura anula dicha declaración por ser un valor no permitido.

Errores de omisión de ciertos caracteres

Paréntesis y corchetes rectos

Hay una serie de datos en Css que han de escribirse entre paréntesis () o corchetes rectos []. Tanto en el valor de propiedades url(ruta) y funciones css calc() como en la conformación de selectores Css [attr='algo'] o :not().

En estas situaciones la omisión de la apertura del paréntesis o corchete recto da como resultado un selector no válido o valor nulo.

El peligro en la omisión está en la omisión del de cierre: anula todo el contenido de la hoja de estilos a partir del punto donde debería haberse cerrado.

Comillas

Hay una serie de valores que han de ir entre comillas o que su uso es optativo. En estos casos la omisión de alguna (aperura o cierre) suele ser parseado por el navegador ya que hay algún otro carácter que indica el final de dicho valor. Como el punto y coma entre declaraciones, la coma si es una serie de valores separados por ellas o valores que han de ir entre paréntesis o corchetes rectos.

En el peor de los casos, resultará en un valor no permitido.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso