"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > CSS Análisis de lenguaje fuertemente escrito

CSS Análisis de lenguaje fuertemente escrito

Publicado el 2025-05-01
Navegar:115

Una de las formas en que puede clasificar un lenguaje de programación es por lo fuertemente tipado que es. 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 se agrega un entero (1) a una cadena que contiene un entero ("1"):

result = 1   "1";

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

a pesar de las connotaciones que implican los términos "débiles" y "fuertes", un lenguaje de programación fuertemente tipado no es necesariamente mejor que uno débilmente tipado. Puede haber escenarios en los que se necesita flexibilidad más que rigidez, y viceversa. Al igual que con muchos aspectos de la programación, la respuesta depende de múltiples contextos externos (es decir, "depende").

El otro bit interesante es que no hay una definición formal de lo que constituye una tipificación fuerte o débil. Esto significa que las percepciones de lo que se considera un lenguaje fuertemente o débilmente tipado difieren de persona a persona, y pueden cambiar con el tiempo.

Mecanografiado

JavaScript se considera un lenguaje débilmente tipado, 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 para JavaScript se han vuelto más complicados.

extensiones como TypeScript fueron creadas para ayudar con esto. Piense en ello como un "complemento" para JavaScript, que injerta una fuerte escritura en el idioma. Esto ayuda a los programadores a navegar con configuraciones complicadas. Un ejemplo de esto podría ser una aplicación de página única intensiva en datos utilizada para el comercio electrónico.

TypeScript actualmente es muy popular en la industria del desarrollo web, y muchos proyectos nuevos predeterminados al usar TypeScript al configurar las cosas primero.

compilar tiempo

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

Como con muchas cosas en la web, el tiempo de compilación es un poco complicado. Una configuración que utiliza TypeScript unirá las piezas de componentes del código JavaScript y las compilará en un solo archivo JavaScript para que el navegador lea y ejecuten.

El momento en que las piezas de componentes se compilan es cuando todas están combinadas. TypeScript sirve como una especie de supervisor, y le gritará si intenta romper las convenciones mecanografiadas que se ha configurado para usted antes de que ocurra la combinación.

el archivo JavaScript cosido de JavaScript es ingerido por el navegador, que tiene su propio tiempo de compilación. El tiempo de compilación del navegador es muy variable, dependiendo de:

  • El dispositivo en el navegador está en,
  • qué otros trabajan el navegador está haciendo, y
  • qué otros trabajos están haciendo los otros programas.

TypeScript no es utilizado directamente por el navegador, pero su presencia se siente. JavaScript es frágil. TypeScript ayuda con esta fragilidad al tratar de evitar errores aguas arriba en el editor de códigos. Esto disminuye los errores de posibilidad ocurren en el JavaScript leído por el navegador, errores que harían que JavaScript deje de funcionar en el sitio web o la aplicación web que una persona está usando.

css

CSS es un lenguaje de programación de dominio declarativo. También está fuertemente escrito. En su mayor parte, los valores en CSS permanecen declarados como se creó. Si un valor no es válido, el navegador tira toda la propiedad.

tipos en css

La lista de tipos en CSS es exhaustiva. Ellos son:

tipos textuales
  • Palabras de clausos:
    • inicial
    • inherit
    • [&] nombre
    • , tales como "hola"
  • urls, como https://css-tricks.com/che&&&&&&&fona-dashed Idents (-), que se utilizan para crear propiedades personalizadas (más sobre esto en un bit)
  • tipos numéricos
  • enteros, que son números decimales 0–9
  • números reales, tales como 3.14
porcentajes, como 25%
    dimensiones, un número con una unidad agregada a él como (100px o 3s)
  • 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 root EMS o la altura de la visión
, como 200ms
    [&]
  • angles, como como 15deg
    • , como 250ms
    • frecuencias, tales 16Hz
    • , como 96dpi
  • dimensiones y longitudes pueden parecer similares, pero las dimensiones pueden contener porcentajes y longitudes no pueden.
  • tipos de color
  • palabras clave:
  • con nombre de colores, como papayawhip
transparent

currentColor
  • colores rgb:
    • hexidecimal notación, tales como como #Ff8764
    • rgb/rgba Notación, como rgba (105, 221, 174, 0.5)
    hsl/hsla, tales como hsl (287, 76%, 50%) [&]
  • colores, tales como butturas, como hsl (287, 76%, 50%) [&]
  • , tales como butt.
      tipos de imágenes
    • de forma final, que usa una palabra clave de círculo o elipse para gradientes radiales
  • 2D Tipos de posición
  • palabras clave:
top
right
  • Bottom
  • Left
  • Center
  • una duración de porcentaje, como 25%
  • ]
programación en css
La mayor parte de la programación en CSS está autorizando selectores, y luego especificando un conjunto de propiedades y sus valores requeridos. Las colecciones de selectores le dan al contenido una forma visual, al igual que cómo las colecciones de JavaScript Logic crean características.
  • CSS tiene funciones. Puede realizar el cálculo, la lógica condicional, las expresiones algorítmicas, el estado y el comportamiento basado en el modo. También tiene propiedades personalizadas, que son efectivamente variables CSS que permiten que los valores se actualicen dinámicamente. Diablos, incluso puedes resolver FizzBuzz con CSS.
    • Al igual que otros lenguajes de programación, también hay una capa de "meta", con diferentes pensamientos y técnicas sobre cómo organizar, administrar y mantener cosas.
    • tirar errores
    • A diferencia de otros lenguajes de programación donde el código existe en gran medida debajo del capó, CSS es muy visual. No verá advertencias o errores en la consola si usa un valor no válido para una declaración de propiedad, pero obtendrá imágenes que no actualizan la forma en que anticipó.
    • La razón de esto es que CSS es resistente. Cuando las imágenes no se actualizan debido a una declaración malinterpretada, CSS está priorizando,
    • asegurando que el contenido se pueda mostrar a todos los costos
    • y representará cualquier otra declaración válida que pueda. Esto está en consonancia con los principios de diseño del idioma, los principios de la plataforma y los objetivos generales de la misión de la web.
    Prueba
  • demostremos cuán fuerte tipeo en CSS mantiene las barandillas en tres ejemplos: uno con una declaración directa de propiedad/valor, una con cálculo y otra con redefinición de una propiedad personalizada.
Ejemplo 1: Declaración directa de propiedad/valor

Para este ejemplo, el navegador no comprende la declaración de "papa" al estilo fronterizo del banner. Tenga en cuenta que las otras declaraciones de propiedad/valor del selector de clase. Banner son honradas por el navegador y se renderizan, a pesar de que el estilo fronterizo tiene un desajuste de tipo. Este es un ejemplo de cuán resiliente es CSS.

La declaración de estilo fronterizo espera uno de los siguientes tipos de estilo textual:

Palabras clave con escolta global, o un

envolvente para una propiedad personalizada.

Si actualizamos el estilo de borde para usar un valor válido y escrito de puntos, el navegador renderizará el borde!

Ejemplo 2: Cálculo

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

En esta pluma, la propiedad del tamaño de fuente del selector P espera 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 propiedad del tamaño de la fuente. Esto se debe a que el segundo argumento en la función calc () 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 tamaño de fuente de 1.5Rem declarado en el elemento del cuerpo.

Esto es un poco en las malezas, pero vale la pena señalar: combinar dos propiedades personalizadas en una función calc () puede causar errores. Si bien ambas propiedades personalizadas pueden ser válidas por su cuenta, Calc () no aceptará tipos textuales de sangría discontinua. Piense en un escenario en el que podríamos intentar multiplicar propiedades personalizadas que contengan unidades no coincidentes, p. --big: 500px y --small: 1em.

Ejemplo 3: propiedad personalizada redefinida

Al igual que las variables JavaScript, los valores de propiedad personalizados se pueden redefinir. Esta flexibilidad permite cosas como crear fácilmente temas de color de modo oscuro.
  • En el: selector de raíz de este codepen, he establecido una propiedad personalizada de-color-cyan, con un valor de #953fe3. Luego, en la clase .square, he actualizado el valor de la propiedad personalizada de color-cyan para ser el máximo. Si bien TOP es un valor válido y escrito, no es un tipo que los honores del color de fondo.
  • Observe que la propiedad personalizada actualizada se alcanza a .Square, y no afecta a otros usos, como el borde de la derecha en la frase "No juegues para escribir". Y si elimina la propiedad personalizada redefinida de .Square, verá que el color de fondo cian vuelve a.
Si bien esto está un poco artificial, sirve como un ejemplo de cómo la redefinición de propiedades personalizadas puede escapar de usted si no tiene cuidado.

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

Estampación

Con el don de la retrospectiva, creo que la falta de advertencias de consola para CSS es un defecto, y ha contribuido a muchas de las percepciones negativas sobre el lenguaje.

Esperar que un desarrollador note que un cambio visual potencialmente pequeño es demasiado importante, y no los cumple con los que están para la mayoría de sus otras herramientas diarias. Hay un par de iniciativas que conozco que intente abordar esto.

Primero es Stylelint, un enlace hecho específicamente para tratar con lenguajes de preprocesamiento similares a CSS y CSS. Stylelint puede integrarse con editores de código, corredores de tareas, herramientas de línea de comandos y acciones de GitHub para ayudar a mantener su CSS bajo control. Esto le permite conocer a los desarrolladores donde ya están.

Segundo es el excelente conjunto de opciones de inspección CSS de Firefox en sus herramientas de desarrollador. En particular, me gustaría llamar la atención sobre su capacidad para identificar CSS no utilizados. Esto es extremadamente útil para identificar selectores que pueden haberse ejecutado en conflicto con un tipo de desajuste.

envolver

CSS se ha escrito fuertemente mientras haya sido un lenguaje de programación, y como lenguaje de programación ha existido durante mucho tiempo. También ha hecho mucho crecer últimamente. Si no 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 ponerse más cómodo con el enfoque firme pero flexible de CSS.

Gracias a Miriam Suzanne por sus comentarios.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3