CSS es un lenguaje fuertemente tipado

Una de las formas en que se puede clasificar un lenguaje de programación es según su tipo fuerte o débil. Aquí, “escrito” significa si las variables se conocen en el momento de la compilación. Un ejemplo de esto sería un escenario en el que 1se agrega un número entero ( ) a una cadena que contiene un número entero ( "1"):

result = 1 + "1";

La cadena que contiene un número entero podría haberse generado involuntariamente a partir de un complicado conjunto de lógica con muchas partes móviles. También podría haber sido generado intencionalmente a partir de una única fuente de verdad.

A pesar de las connotaciones que implican los términos “débil” y “fuerte”, un lenguaje de programación fuertemente tipado no es necesariamente mejor que uno débilmente tipado. Puede haber escenarios en los que se necesite más flexibilidad que rigidez, y viceversa. Como ocurre con muchos aspectos de la programación, la respuesta depende de múltiples contextos externos (es decir, “depende”).

La otra parte interesante es que no existe una definición formal de lo que constituye tipificación fuerte o débil. Esto significa que las percepciones de lo que se considera un lenguaje fuertemente o débilmente tipificado difieren de persona a persona y pueden cambiar con el tiempo.

mecanografiado

JavaScript se considera un lenguaje de tipo débil y esta flexibilidad contribuyó a su adopción temprana en la web. Sin embargo, a medida que la web ha madurado e industrializado, los casos de uso de JavaScript se han vuelto más complicados.

Se crearon extensiones como TypeScript para ayudar con esto. Piense en ello como un “complemento” para JavaScript, que incorpora una escritura fuerte al lenguaje. Esto ayuda a los programadores a navegar por configuraciones complicadas. Un ejemplo de esto podría ser una aplicación de una sola página con uso intensivo de datos utilizados para el comercio electrónico.

TypeScript es actualmente muy popular en la industria del desarrollo web, y muchos proyectos nuevos utilizan TypeScript de forma predeterminada cuando configuran las cosas por primera vez.

Tiempo de compilación

El tiempo de compilación es el momento en el que un lenguaje de programación se convierte en código de máquina. Es un precursor del tiempo de ejecución, el momento en el que la computadora ejecuta el código de máquina.

Como ocurre con muchas cosas en la web, el tiempo de compilación es un poco complicado. Una configuración que utiliza TypeScript unirá los componentes del código JavaScript y los compilará en un único archivo JavaScript para que el navegador lo lea y ejecute.

El momento en que se compilan los componentes es cuando se combinan todos. TypeScript actúa como una especie de supervisor y le gritará si intenta romper las convenciones escritas que ha establecido antes de que se produzca la combinación.

Luego, el navegador introduce el archivo JavaScript unido, que tiene su propio tiempo de compilación. El tiempo de compilación del navegador es muy variable, dependiendo de:

• El dispositivo en el que se encuentra el navegador,
• ¿Qué otro trabajo está haciendo el navegador y?
• Qué otro trabajo están haciendo los otros programas del dispositivo.

El navegador no utiliza TypeScript directamente, pero siente su presencia. JavaScript es frágil. TypeScript ayuda con esta fragilidad al intentar evitar errores en el editor de código. Esto reduce la posibilidad de que se produzcan errores en el JavaScript leído por el navegador, errores que provocarían que JavaScript dejara de funcionar en el sitio web o la aplicación web que una persona está utilizando.

CSS

CSS es un lenguaje de programación declarativo de dominio específico. También está fuertemente tipado. En su mayor parte, los valores en CSS permanecen declarados como creados. Si un valor no es válido, el navegador descarta toda la propiedad.

Tipos de CSS

La lista de tipos de CSS es exhaustiva. Ellos hijo:

tipos textuales

• Palabras clave de alcance global:
  • initial
  • inherit
  • unset
  • revert
• Identificaciones personalizadas, que se utilizan específicamente para cosas, como proporcionar un grid-areanombre.
• Cadenas, como,"hello"
• URL, comohttps://css-tricks.com/
• Identidades discontinuas ( --), que se utilizan para crear propiedades personalizadas (más sobre esto en un momento)

tipos numéricos

• Numeros enteros, que son numeros decimales del 0 al 9
• Números reales, como3.14
• Porcentajes, como25%
• Dimensiones, un número con una unidad adjunta como ( 100pxo 3s)
• proporciones, como16/9
• flex, una longitud variable para el cálculo de la cuadrícula CSS

Tipos de cantidad

• Longitudes:
  • Longitudes absolutas, como píxeles o centímetros.
  • Longitudes relativas, como la raíz ems o la altura de la ventana gráfica
  • tiempo, como200ms
• Ángulos, como15deg
• tiempo, como250ms
• frecuencias, cuentos16Hz
• Resolución, como96dpi

Las dimensiones y las longitudes pueden parecer similares, pero las dimensiones pueden contener porcentajes y las longitudes no.

tipos de color

• Palabras clave:
  • Colores con nombre, comopapayawhip
  • transparent
  • currentColor
• Colores RGB:
  • Notación hexadecimal, como#FF8764
  • Notación RGB/RGBa, comorgba(105, 221, 174, 0.5)
• Colores HSL/HSLA, comohsl(287, 76%, 50%)
• Colores del sistema, comoButtonText

Tipos de imagen

• Imagen, que es una URL de referencia a un archivo de imagen o degradado
• color-stop-list, una lista de dos o más paradas de color, utilizadas para la noción de degradado
• linear-color-stop, una expresión de color y longitud utilizada para indicar una parada de color degradado
• linear-color-hint, un porcentaje de longitud utilizado para interpolar el color.
• ending-shape, que utiliza una palabra clave de cualquiera circleo ellipsepara gradientes radiales

Tipos de posicionamiento 2D

• Palabras clave:
  • top
  • right
  • bottom
  • left
  • center
• Una longitud porcentual, como25%

Programación en CSS

La mayor parte de la programación en CSS consiste en crear selectores y luego especificar un conjunto de propiedades y sus valores requeridos. Las colecciones de selectores dan al contenido una forma visual, de forma muy similar a cómo las colecciones de lógica JavaScript crean características.

CSS tiene funciones. Puede realizar cálculos, lógica condicional, expresiones algorítmicas, estados y comportamientos basados ​​en modos. También tiene propiedades personalizadas, que son efectivamente variables CSS que permiten actualizar los valores dinámicamente. Diablos, incluso puedes resolver fizzbuzz con CSS.

Al igual que otros lenguajes de programación, también existe una “meta” capa, con diferentes ideas y técnicas sobre cómo organizar, gestionar y mantener las cosas.

Errores de lanzamiento

A diferencia de otros lenguajes de programación donde el código existe en gran medida bajo el capó, CSS es muy visual. No verá advertencias ni errores en la consola si utiliza un valor no válido para una declaración de propiedad, pero obtendrá elementos visuales que no se actualizan de la forma prevista.

La razón de esto es que CSS es resistente. Cuando los elementos visuales no se actualizan debido a una declaración mal construida, CSS da prioridad, garantizando que el contenido se pueda mostrar a toda costa y que presente todas las demás declaraciones válidas posibles. Esto está en consonancia con los principios de diseño del lenguaje, los principios de la plataforma y los objetivos generales de la misión de la web.

prueba

Demostraremos cómo la escritura fuerte en CSS mantiene las barreras de seguridad en tres ejemplos: uno con una declaración directa de propiedad/valor, otro con cálculo y otro con la redefinición de una propiedad personalizada.

Ejemplo 1: Declaración sencilla de propiedad/valor

En este ejemplo, el navegador no comprende la border-styledeclaración “papá” del banner. Tenga en cuenta que el navegador respeta y representa las otras .bannerdeclaraciones de propiedad/valor del selector de clase, aunque border-styleel tipo no coincide. Este es un ejemplo de lo resistente que es CSS.

La border-styledeclaración espera uno de los siguientes tipos de estilo textual:

• Palabras clave de alcance global, o una
• Sangría discontinua para una propiedad personalizada.

Si actualizamos border-stylepara usar un valor escrito válido de dotted, ¡el navegador representará el borde!

Ejemplo 2: Cálculo

La calc()función en CSS nos permite tomar dos argumentos y un operador para devolver un resultado calculado. Si uno de los argumentos no utiliza un tipo válido, el cálculo no funcionará.

En este Pen, la propiedad pdel selector font-sizeespera un valor con un tipo de dimensión numérica (por ejemplo 1.5rem). Sin embargo, la función de cálculo produce un valor de tipo no válido para la font-sizepropiedad. Esto se debe a que el segundo argumento de la calc()función es una cadena ( "2rem") y no un tipo de dimensión numérica.

Debido a esto, el tamaño de fuente del párrafo vuelve al siguiente nodo principal más aplicable: el font-sizede 1.5remdeclarado en el bodyelemento.

Esto es un poco complicado, pero vale la pena señalarlo: combinar dos propiedades personalizadas en una calc()función puede causar errores. Si bien ambas propiedades personalizadas pueden ser válidas por sí solas, calc()no aceptarán tipos de texto con sangría discontinua. Piense en un escenario en el que podríamos intentar multiplicar propiedades personalizadas que contienen unidades que no coinciden, por ejemplo, --big: 500pxy --small: 1em.

Ejemplo 3: propiedad personalizada redefinida

Al igual que las variables de JavaScript, los valores de propiedades personalizadas se pueden redefinir. Esta flexibilidad permite cosas como crear fácilmente temas de color en modo oscuro.

En el :rootselector de este CodePen, configure una propiedad personalizada de --color-cyan, con un valor de #953FE3. Luego, en la .squareclase, actualicé el --color-cyanvalor de la propiedad personalizada para que sea top. Si bien topes un valor escrito válido, no es un tipo que background-colorrespeta.

Tenga en cuenta que la propiedad personalizada actualizada tiene como ámbito .squarey no afecta otros usos, como el borde derecho de la frase “No jugar a escribir”. Y si elimina la propiedad personalizada redefinida de .square, verá que el color de fondo cian vuelve a aparecer.

Si bien esto es un poco artificial, sirve como ejemplo de cómo la redefinición de propiedades personalizadas puede escaparse de usted si no tiene cuidado.

Este fenómeno se puede encontrar en proyectos con mala comunicación, bases de código CSS más grandes y situaciones en las que se utilizan preprocesadores CSS para construir propiedades personalizadas a escala.

Estampación

En retrospectiva, creo que la falta de advertencias de consolación para CSS es un defecto y ha contribuido a muchas de las percepciones negativas sobre el lenguaje.

Esperar que un desarrollador note un cambio visual potencial pequeño es una petición demasiado grande y no lo coloque donde está para la mayoría de sus otras herramientas diarias. Hay un par de iniciativas que conozco que intento abordar este problema.

El primero es stylelint, un linter creado específicamente para trabajar con CSS y lenguajes de preprocesamiento similares a CSS. stylelint puede integrarse con editores de código, ejecutores de tareas, herramientas de línea de comandos y acciones de GitHub para ayudar a mantener su CSS bajo control. Esto le permite encontrarse con los desarrolladores donde ya se encuentran.

En segundo lugar está el excelente conjunto de opciones de inspección de CSS de Firefox en sus herramientas para desarrolladores. En particular, me gustaría llamar la atención sobre su capacidad para identificar CSS no utilizado. Esto es extremadamente útil para identificar selectores que pueden haber entrado en conflicto con una discrepancia de tipos.

terminando

CSS ha sido fuertemente tipado desde que es un lenguaje de programación, y como lenguaje de programación ha existido durante mucho tiempo. También ha crecido mucho últimamente. Si no se ha registrado, hay algunas funciones nuevas y sorprendentes disponibles.

A medida que JavaScript fuertemente tipado se vuelve más popular, espero que ayude a los desarrolladores a sentirse más cómodos con el enfoque firme pero flexible de CSS.

---

Gracias a Miriam Suzanne por sus comentarios.