「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > CSSは言語分析を強く入力しました

CSSは言語分析を強く入力しました

2025-06-14に投稿されました
ブラウズ:535

プログラミング言語を分類する方法の1つは、それがどれほど強くまたは弱く入力されているかによってです。ここで、「タイプされた」とは、変数がコンパイル時に既知の場合を意味します。これの例は、整数(1)が整数( "1")を含む文字列に追加されるシナリオです:

result = 1   "1";

整数を含む文字列は、多くの可動部品を備えた複雑なロジックスイートから意図せずに生成された可能性があります。また、単一の真実の源から意図的に生成された可能性があります。

「弱い」および「強い」という用語は、強いタイプのプログラミング言語が必ずしも弱いタイプのものよりも優れているわけではないという意味にもかかわらず。柔軟性が剛性よりも必要なシナリオがあり、その逆もあるかもしれません。プログラミングの多くの側面と同様に、答えは複数の外部コンテキストに依存します(つまり、「それは依存します」)。

他の興味深いビットは、強いタイピングまたは弱いタイピングを構成するものの正式な定義がないことです。これは、強くまたは弱い型の言語と見なされるものの認識が人によって異なり、時間とともに変化する可能性があることを意味します。

TypeScript

JavaScriptは弱いタイプの言語と見なされており、この柔軟性はWebでの早期採用に貢献しました。ただし、Webが成熟し、工業化されるにつれて、JavaScriptのユースケースはより複雑になりました。

TypeScriptのような拡張機能が作成され、これを支援しました。それは、言語に強いタイピングを接ぎ木するJavaScriptの「プラグイン」と考えてください。これにより、プログラマーは複雑なセットアップをナビゲートするのに役立ちます。この例は、eコマースに使用されるデータ集約型シングルページアプリケーションです。

TypeScriptは現在、Web開発業界で非常に人気があり、多くの新しいプロジェクトは、最初に物事を設定するときにTypeScriptを使用することを義務付けています。

compile time

コンパイル時間とは、プログラミング言語がマシンコードに変換される瞬間です。これは、マシンコードがコンピューターによって実行される瞬間、ランタイムの前駆体です。

Web上の多くのことと同様に、コンパイル時間は少し難しいです。 TypeScriptを使用するセットアップは、JavaScriptコードのコンポーネントピースを縫い合わせて、それらを単一のJavaScriptファイルにコンパイルして、ブラウザを読み取り、実行するようにコンパイルします。

コンポーネントピースがコンパイルする時間は、それらがすべて結合されている場合です。タイプスクリプトは一種の監督として機能し、組み合わせが発生する前に自分で設定したタイプされた慣習を破ろうとすると、あなたに怒鳴ります。

ステッチされたjavaScriptファイルは、独自のコンパイル時間を備えたブラウザによって摂取されます。ブラウザコンパイル時間は、次のものによって非常に変動します。

    ブラウザがオンになっているデバイス、
  • ブラウザが行っている他の動作、
  • 他のプログラムが行っている他の動作。
TypeScriptはブラウザでは直接使用されませんが、その存在は感じられます。 JavaScriptは壊れやすいです。タイプスクリプトは、コードエディターの上流のエラーを防止しようとすることにより、この脆弱性を支援します。これにより、ブラウザで読み取られたJavaScriptで発生する可能性エラーが減少します。これにより、JavaScriptがWebサイトまたはWebアプリでの機能の機能を停止するエラーが発生します。

css

CSSは、宣言的なドメイン固有のプログラミング言語です。また、強く入力されています。ほとんどの場合、CSSの値は著者と宣言されたままです。値が無効な場合、ブラウザはプロパティ全体を捨てます。

css

のタイプ

CSSのタイプのリストは徹底的です。彼らです:

テキストタイプ

グローバルにスコープされたキーワード:
  • initial
    • enternit
    • revert
    • https://css-tricks.com/などの "hello"
  • 文字列。
  • 数値タイプ
  • 整数、10〜9
  • の実数です。 16/9
Flex、CSSグリッド計算の可変長
    数量タイプ
  • 長さ:
  • ピクセルやセンチメートルなどの絶対長さ
  • 時間など、 250ms
  • 周波数など、96dpi
  • など、16hz
解像度など
寸法と長さは似ているように見えるかもしれませんが、寸法にはパーセンテージと長さが含まれない場合があります。
  • 色タイプ
    • キーワード:
    • damed colors fide fapayawhip
    • transparent
    currentColor
  • rgb colors:
  • hexidecimal notiation as as #ff8764
  • rgb/rgba表記、RGBA(105、221、174、0.5)

    画像タイプ
    • 画像。これは、画像ファイルまたは勾配へのURL参照
    • カラーストップリスト、2つ以上のカラーストップのリスト、グラデーション概念
    • 、線形 - カラーストップ、勾配停止
    ending-shape、ラジアル勾配に円または楕円のキーワードを使用します
    • 2Dポジショニングタイプ
    • キーワード:
    top
  • right
  • bottom
left
center
  • CSSのプログラミング
  • CSSのプログラミングの大部分は、セレクターを作成し、一連のプロパティとその必要な値を指定しています。セレクターのコレクションは、JavaScriptロジックのコレクションが機能を作成する方法と同様に、コンテンツに視覚的な形を与えます。
  • CSSには関数があります。計算、条件付き論理、アルゴリズム式、状態、およびモードベースの動作を実行できます。また、値を動的に更新できるようにするCSS変数であるカスタムプロパティもあります。ヘック、CSSでフィズバズを解くこともできます。
  • 他のプログラミング言語と同様に、「メタ」レイヤーもあり、物事の整理、管理、維持方法に関するさまざまな考えやテクニックがあります。
スローエラー
    コードがボンネットの下に大部分が存在する他のプログラミング言語とは異なり、CSSは非常に視覚的です。プロパティ宣言に無効な値を使用している場合、コンソールに警告やエラーが表示されませんが、予想される方法を更新しないビジュアルが表示されます。
    • この理由は、CSSが回復力があることです。誤解された宣言のためにビジュアルが更新されない場合、CSSは優先順位付けされています
    • コンテンツをすべてのコストで表示できるようにし、他のすべての有効な宣言を可能にする可能性のあるすべての有効な宣言をレンダリングします。これは、言語の設計原則、プラットフォームの原則、およびWebのミッションの包括的な目標に沿っています。
    • 証拠
    • CSSのタイピングがGuardRailsを3つの例で維持する方法を示しましょう。
    • 例1:簡単なプロパティ/値宣言
    • この例では、ブラウザはバナーのボーダースタイルの「ジャガイモ」宣言を理解していません。ボーダースタイルにはタイプの不一致があるにもかかわらず、他の.bannerクラスセレクターのプロパティ/値宣言はブラウザによって尊重され、レンダリングされていることに注意してください。これは、CSSがどのように回復力があるかの例です。
  • ボーダースタイルの宣言は、次のテキストスタイルタイプのいずれかを期待しています:
グローバルにスコープされたキーワード、または

dashed Indentのカスタムプロパティ。

ボーダースタイルを更新して点線の有効な型と入力された値を使用すると、ブラウザはボーダーをレンダリングします!

例2:計算

CSSのcalc()関数を使用すると、2つの引数とオペレーターが計算された結果を返すことができます。引数の1つが有効なタイプを使用しない場合、計算は機能しません。

このペンでは、Pセレクターのフォントサイズのプロパティは、数値寸法タイプ(1.5REMなど)の値を期待しています。ただし、計算関数は、フォントサイズのプロパティの無効なタイプ値を生成します。これは、calc()関数の2番目の引数が文字列( "2rem")であり、数値寸法タイプではないためです。

このため、段落のフォントサイズは、次の最も適用可能な親ノードに戻ります。1.5レムのフォントサイズは、ボディ要素で宣言されています。

これは雑草には少しですが、指摘する価値があります。2つのカスタムプロパティをcalc()関数に組み合わせることで、エラーを引き起こす可能性があります。両方のカスタムプロパティはそれ自体で有効ですが、calc()は破線のインデントのテキストタイプを受け入れません。不一致のユニットを含むカスタムプロパティを掛けることを試みる可能性のあるシナリオを考えてください。 - ビグ:500pxと - スマル:1em。

例3:再定義されたカスタムプロパティ

JavaScript変数と同様に、カスタムプロパティ値を再定義できます。この柔軟性により、ダークモードの色のテーマを簡単に作成できるようになります。

:このcodepenのルートセレクターでは、#953fe3の値を持つ - color-cyanのカスタムプロパティを設定しました。次に、.Squareクラスでは、-color-cyanカスタムプロパティの値をトップに更新しました。 TOPは有効で入力された値ですが、バックグラウンドカラーの栄誉があるタイプではありません。

更新されたカスタムプロパティは.squareにスコープされており、「タイプすることはない」というフレーズの右側の境界線など、他の使用法には影響しないことに注意してください。また、.squareから再定義されたカスタムプロパティを削除すると、Cyanの背景色が戻ってきます。

これは少し不自然ですが、注意しないとカスタムプロパティを再定義することがあなたから逃れることができる例として機能します。

この現象は、コミュニケーションが不十分なプロジェクト、より大きなCSSコードベース、およびCSS前処理者が規模のカスタムプロパティを構築するために使用される状況で見つけることができます。

ツーリング
  • 後知恵の贈り物で、CSSのコンソール警告の欠如は欠陥であり、言語に関する多くの否定的な認識に貢献していると思います。
  • 開発者が、潜在的に小さな視覚的変化が大きすぎることに気付くことを願っています。これに対処しようとしていることを知っているいくつかのイニシアチブがあります。
は、CSSおよびCSSのような前処理言語を扱うために特別に作られたリナーであるStylelintです。 Stylelintは、CSSを制御するのに役立つコードエディター、タスクランナー、コマンドラインツール、およびGitHubアクションと統合できます。これにより、開発者が既にある開発者に会うことができます。

2番目は、開発者ツールにおけるFirefoxの優れたCSS検査オプションのスイートです。特に、未使用のCSSを特定する能力に注意を喚起したいと思います。これは、タイプの不一致に違反している可能性のあるセレクターを識別するのに非常に役立ちます。

ラッピング

CSSは、プログラミング言語である限り、強くタイプされており、プログラミング言語として長い間存在しています。また、最近多くの成長を遂げています。チェックインしていない場合は、いくつかの新しい驚くべき機能があります。

強く型のJavaScriptがより人気が高まるにつれて、開発者がCSSの企業でありながら柔軟なアプローチにより快適になるのを助けることが私の希望です。

フィードバックをしてくれたミリアム・スザンヌに感謝します。

最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3