"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Analyse du langage fortement tapé CSS

Analyse du langage fortement tapé CSS

Publié le 2025-05-01
Parcourir:862

L'une des façons de classer un langage de programmation est de la force ou de la faiblesse. Ici, «tapé» signifie si les variables sont connues au moment de la compilation. Un exemple de cela serait un scénario où un entier (1) est ajouté à une chaîne contenant un entier ("1"):

result = 1   "1";

La chaîne contenant un entier aurait pu être générée involontairement à partir d'une suite de logique compliquée avec beaucoup de pièces mobiles. Il aurait également pu être généré intentionnellement à partir d'une seule source de vérité.

Malgré les connotations que les termes «faibles» et «forts» impliquent, un langage de programmation fortement typé n'est pas nécessairement meilleur qu'un langage faiblement typé. Il peut y avoir des scénarios où la flexibilité est plus nécessaire que la rigidité et vice-versa. Comme pour de nombreux aspects de la programmation, la réponse dépend de plusieurs contextes externes (c'est-à-dire «cela dépend»).

L'autre bit intéressant est qu'il n'y a pas de définition formelle de ce qui constitue un typage fort ou faible. Cela signifie que les perceptions de ce qui est considéré comme un langage fortement ou faiblement typé diffère d'une personne à l'autre et peut changer avec le temps.

Manuscrit

JavaScript est considéré comme un langage faiblement typé, et cette flexibilité a contribué à son adoption précoce sur le Web. Cependant, comme le Web a mûri et industrialisé, les cas d'utilisation pour JavaScript sont devenus plus compliqués.

Des extensions comme TypeScript ont été créées pour aider à cela. Considérez-le comme un «plugin» pour JavaScript, qui greffe un type fort sur la langue. Cela aide les programmeurs à naviguer des configurations compliquées. Un exemple de cela pourrait être une application à page unique à forte intensité de données utilisée pour le commerce électronique.

TypeScript est actuellement très populaire dans l'industrie du développement Web, et de nombreux nouveaux projets utilisent par défaut TypeScript lors de la première définition des choses.

compile le temps

Le temps de compilation est le moment où un langage de programmation est converti en code machine. C'est un précurseur à l'exécution, le moment où le code machine est effectué par l'ordinateur.

Comme avec beaucoup de choses sur le Web, le temps de compilation est un peu délicat. Une configuration qui utilise TypeScript aspirera les pièces de composant de code JavaScript et les compilera dans un seul fichier javascript pour le navigateur à lire et à exécuter.

Le temps où les composants compilent, c'est quand ils sont tous combinés. TypeScript sert de type de surveillant et vous criera dessus si vous essayez de briser les conventions typées que vous avez configurées pour vous avant que la combinaison ne se produise.

Le fichier JavaScript together cousé est ensuite ingéré par le navigateur, qui a son propre temps de compilation. Le temps de compilation du navigateur est très variable, selon:

  • Le périphérique sur lequel se trouve le navigateur,
  • quels autres fonctionnent le navigateur, et
  • quels fonctionnent les autres programmes de l'appareil.

TypeScript n'est pas directement utilisé par le navigateur, mais sa présence est ressentie. JavaScript est fragile. TypeScript aide à cette fragilité en essayant d'éviter les erreurs en amont dans l'éditeur de code. Cela diminue les erreurs de chance dans le javascript lu par le navigateur - des erreurs qui entraîneraient JavaScript à arrêter de fonctionner sur le site Web ou l'application Web qu'une personne utilise.

css

CSS est un langage de programmation déclaratif spécifique au domaine. Il est également fortement dactylographié. Pour la plupart, les valeurs de CSS restent déclarées comme écrites. Si une valeur est invalide, le navigateur jette toute la propriété.

types dans css

La liste des types dans CSS est approfondie. Ils sont:

Types textuels
  • Mots-clés à émission globale:
    • Initial
    • hériter
    • unset
    • revert
  • identifie les identifiés personnalisées, qui sont spécifique Nom
  • chaînes, telles que, "Hello"
  • URLs, tels que https://css-tricks.com/&&&& godaye.
  • Types numériques
Integers, which are decimal numbers 0–9
Real numbers, such as 3.14
  • Percentages, such as 25%
  • Dimensions, a number with a unit appended to it such as (100px or 3s)
  • Ratios, such as 16/9
  • flex, une longueur variable pour le calcul de la grille CSS
  • Types de quantité
longueurs:
longueurs absolues, telles que des pixels ou des centimètres
  • des longueurs relatives, telles que root ems ou la hauteur de la vue
    • Time, telles que 200ms
    • angles, tels que les angles, tels que les angles, tels que les angles, tels que les angles, tels que les angles, que ce 15Deg
    Time, tels que 250ms
  • Fréquences, telles Résolution 16Hz
  • , telles que 96dpi
  • Les dimensions et les longueurs peuvent sembler similaires, mais les dimensions peuvent contenir des pourcentages et des longueurs ne peuvent pas.
  • Types de couleurs

Mots-clés:
Couleurs nommées, telles que Papayawhip
  • transparent
    • CurrentColor
    • # Ff8764
    • notation rgb / rgba, tels que RGBA (105, 221, 174, 0.5)
  • HSL / HSLA Couleurs, telles que HSL (287, 76%, 50%)
    • Couleurs du système, tel que ButtonTex
    • types d'images
    • image, qui est une référence d'URL à un fichier image ou un gradient
  • couleurs-stop-list, une liste de deux ou plusieurs arrêts de couleur, utilisé pour la notion de gradient
  • Color
  • Shape, qui utilise un mot-clé de cercle ou d'ellipse pour les gradients radiaux
2D Types de positionnement
  • mots clés:
  • top
  • droit
  • inférieur
  • gauche
Programmation dans css
La majeure partie de la programmation dans CSS fait des sélecteurs, puis spécifiant une suite de propriétés et leurs valeurs requises. Les collections de sélecteurs donnent au contenu une forme visuelle, tout comme la façon dont les collections de la logique JavaScript crée des fonctionnalités.
  • CSS a des fonctions. Il peut effectuer le calcul, la logique conditionnelle, les expressions algorithmiques, l'état et le comportement basé sur le mode. Il possède également des propriétés personnalisées, qui sont effectivement des variables CSS qui permettent de mettre à jour les valeurs dynamiquement. Heck, vous pouvez même résoudre FizzBuzz avec CSS.
    • Comme d'autres langages de programmation, il existe également une couche «méta», avec différentes pensées et techniques sur la façon d'organiser, de gérer et de maintenir des choses.
    • lance des erreurs
    • Contrairement à d'autres langages de programmation où le code existe largement sous le capot, CSS est très visuel. Vous ne verrez pas d'avertissements ou d'erreurs dans la console si vous utilisez une valeur non valide pour une déclaration de propriété, mais vous obtiendrez des visuels qui ne mettent pas à jour comme vous l'aviez prévu.
    • La raison en est que CSS est résilient. Lorsque les visuels ne mettent pas à jour en raison d'une déclaration mal construite, CSS privilégie,
    • garantissant que le contenu peut être affiché à tout prix
    • et rendra toutes les autres déclarations valides qu'il peut peut-être. Ceci est conforme aux principes de conception de la langue, aux principes de la plate-forme et aux objectifs globaux de la mission du Web.
    Preuve
  • Démontrer à quel point le typage de CSS maintient les gardiens en trois exemples: un avec une propriété / valeur de valeur simple, une avec calcul et une avec redéfinition d'une propriété personnalisée.
Exemple 1: Déclaration de propriété / valeur simple

Pour cet exemple, le navigateur ne comprend pas la déclaration de «pomme de terre» de style frontière de la bannière. Notez que les autres déclarations de propriété / valeur de sélecteur de classe. Ceci est un exemple de la résiliente CSS.

La déclaration de style bordure attend l'un des types de style textuel suivant:

Mots-clés à socle globalement, ou un

Si nous mettons à jour le style de bordure pour utiliser une valeur valide et tapée de pointillés, le navigateur rendra la bordure!

Exemple 2: calcul

La fonction calc () dans CSS nous permet de prendre deux arguments et un opérateur pour renvoyer un résultat calculé. Si l'un des arguments n'utilise pas de type valide, le calcul ne fonctionnera pas.

Dans ce stylo, la propriété de taille de police du sélecteur P attend une valeur avec un type de dimension numérique (par exemple 1.5REM). Cependant, la fonction de calcul produit une valeur de type non valide pour la propriété de taille de police. En effet

Pour cette raison, la taille de la police du paragraphe retombe au nœud parent le plus applicable suivant - la taille de police de 1.5rem déclaré sur l'élément corporel.

C'est un peu dans les mauvaises herbes, mais vaut la peine de pointer: combiner deux propriétés personnalisées dans une fonction calc () peut provoquer des erreurs. Bien que les deux propriétés personnalisées puissent être valides par elles-mêmes, Calc () n'acceptera pas les types textuels en pointillés. Pensez à un scénario où nous pourrions essayer de multiplier les propriétés personnalisées qui contiennent des unités incompatibles, par exemple --Big: 500px et --Small: 1em.

Exemple 3: propriété personnalisée redéfinie

Comme les variables JavaScript, les valeurs de propriété personnalisées peuvent être redéfinies. Cette flexibilité permet de créer facilement des thèmes de couleur de mode foncé.

Dans le: sélecteur de racines de ce code de codepen, j'ai défini une propriété personnalisée de --Color-Cyan, avec une valeur de # 953FE3. Ensuite, dans la classe .Square, j'ai mis à jour la valeur de la propriété personnalisée - Color-Cyor. Bien que le haut soit une valeur valide et dactylographiée, ce n'est pas un type que les honneurs en arrière-plan.

    Notez que la propriété personnalisée mise à jour est portée à .Square, et n'affecte pas d'autres usages, tels que la bordure droite de l'expression "ne jouez pas pour taper." Et si vous supprimez la propriété personnalisée redéfinie de .Square, vous verrez la couleur de l'arrière-plan cyan se retourner.
  • Bien que cela soit un peu artificiel, il sert d'exemple de la façon dont la redéfinition des propriétés personnalisées peut vous éloigner si vous ne faites pas attention.
  • Ce phénomène peut être trouvé dans des projets avec une mauvaise communication, des bases CSS plus grandes et des situations où les préprocesseurs CSS sont utilisés pour construire des propriétés personnalisées à grande échelle.

outillage

Avec le don du recul, je pense que le manque d'avertissements de console pour CSS est un défaut et a contribué à beaucoup de perceptions négatives sur la langue.

En espérant qu'un développeur remarquera qu'un changement visuel potentiellement minuscule est une demande trop importante et ne les rencontre pas où ils sont pour la plupart de leurs autres outils quotidiens. Il y a quelques initiatives dont je suis conscient qui essaient de résoudre ce problème.

est d'abord Stylelint, un linter conçu spécifiquement pour traiter les langues de prétraitement CSS et CSS. Stylelint peut s'intégrer aux éditeurs de code, aux coureurs de tâches, aux outils de ligne de commande et aux actions GitHub pour aider à garder votre CSS sous contrôle. Cela lui permet de rencontrer des développeurs où ils se trouvent déjà.

Second est l'excellente suite d'options d'inspection CSS de Firefox dans ses outils de développeur. En particulier, je voudrais attirer l'attention sur sa capacité à identifier le CSS inutilisé. Ceci est extrêmement utile pour identifier les sélecteurs qui peuvent avoir retenu le type de type.

Enveloppement

CSS est fortement dactylographié depuis aussi longtemps qu'il est un langage de programmation, et en tant que langage de programmation, il existe depuis longtemps. Cela a également beaucoup grandi ces derniers temps. Si vous n'avez pas enregistré, il existe de nouvelles fonctionnalités incroyables.

à mesure que JavaScript fortement de type devient plus populaire, j'espère qu'il aide les développeurs à devenir plus à l'aise avec l'entreprise, mais flexible, de CSS.

Merci à Miriam Suzanne pour ses commentaires.

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3