CSSは強く型付けされたプログラミング言語です

プログラミング言語を分類する1つの方法は、それらがどれほど強くまたは弱く型付けされているかによってです。この場合、「型付き」とは、変数がコンパイル時に認識されているかどうかを意味します。良い例は、「1」を含む文字列に整数1が追加されるシナリオです。

整数を含む文字列は、多くの可動部分を持つ複雑なロジックのセットから誤って組み立てられた可能性があります。また、信頼できる唯一の情報源から意図的に編集することもできます。

弱いと強いという用語の定義にもかかわらず、強く型付けされたプログラミング言語は、弱い型付けのプログラミング言語よりも必ずしも優れているとは限りません。柔軟性が剛性よりもはるかに有用であり、その逆のシナリオは完全に受け入れられます。プログラミングの多くの側面と同様に、この場合、答えはさまざまな外部コンテキストに依存します。「…に依存します」。

もう1つの興味深い点は、強い型と弱い型が何であるかについての正式な定義がないことです。

TypeScript

JavaScriptは弱い型の言語と見なされており、この柔軟性がインターネットでの早期採用に貢献しています。ただし、インターネットが成熟して発展するにつれて、JavaScriptのユースケースはより複雑になりました。

TypeScriptのような拡張機能は、これを支援するために作成されました。言語に強い型を植え付けるJavaScriptの「プラグイン」と考えてください。これは、プログラマーが複雑な設定をナビゲートするのに役立ちます。この例としては、オンラインストアで使用されるデータ集約型のシングルページアプリケーションがあります。TypeScriptは現在、Web開発業界で非常に人気があり、多くの新しいプロジェクトはデフォルトでTypeScriptを使用しています。

コンパイル

コンパイルとは、プログラミング言語が機械語に翻訳される期間です。これは実行時間の前兆であり、コンピューターがマシンコードを実行するのにかかる時間です。

, . , TypeScript, JavaScript JavaScript .

- , . TypeScript , , .

JavaScript «» , . :

• ,

  
  
  
  
  

• ,

  
  
  
  
  

• ,

  
  
  
  
  

TypeScript , . JavaScript . TypeScript , . JavaScript, , — , , JavaScript - -, .

CSS

CSS - , . . CSS . , .

CSS

CSS :

:

• :

  
  
  
  
  

  • initial
    
    
    
    

    
    
    
    
    

  • inherit
    
    
    
    

    
    
    
    
    

  • unset
    
    
    
    

    
    
    
    
    

  • revert
    
    
    
    

    
    
    
    
    

• ,  grid-area
  
  
  
  

  
  
  
  
  

• "hello"
  
  
  
  

  
  
  
  
  

• URL- https://css-tricks.com/
  
  
  
  

  
  
  
  
  

• (--
  
  
  
  )

  
  
  
  
  

:

• , 0-9

  
  
  
  
  

• , 3.14
  
  
  
  

  
  
  
  
  

• , 25%
  
  
  
  

  
  
  
  
  

• , , 100px



3s
  
  
  
  

  
  
  
  
  

• , 16/9
  
  
  
  

  
  
  
  
  

• Flex Grid

  
  
  
  
  

:

• :

  
  
  
  
  

  • ,

    
    
    
    
    

  • , ems

    
    
    
    
    

  • , 200ms
    
    
    
    

    
    
    
    
    

• , 250ms
  
  
  
  

  
  
  
  
  

• , 15deg
  
  
  
  

  
  
  
  
  

• , 16Hz
  
  
  
  

  
  
  
  
  

• , 96dpi
  
  
  
  

  
  
  
  
  

() , , - .

:

• :

  
  
  
  
  

  • ,  papayawhip
    
    
    
    

    
    
    
    
    

  • transparent
    
    
    
    

    
    
    
    
    

  • currentColor
    
    
    
    

    
    
    
    
    

• RGB

  
  
  
  
  

  • ,  #FF8764
    
    
    
    

    
    
    
    
    

  • RGB/RGBa-, rgba(105, 221, 174, 0.5)
    
    
    
    

    
    
    
    
    

• HSL/HSLA ,  hsl(287, 76%, 50%)
  
  
  
  

  
  
  
  
  

• ,  ButtonText
  
  
  
  

  
  
  
  
  

:

• , URL .

  
  
  
  
  

• , .

  
  
  
  
  

• «» .

  
  
  
  
  

• , .

  
  
  
  
  

• ( circle 



 ellipse
  
  
  
  ) .

  
  
  
  
  

:

• 
  
  
  
  

  • top
    
    
    
    

    
    
    
    
    

  • right
    
    
    
    

    
    
    
    
    

  • bottom
    
    
    
    

    
    
    
    
    

  • left
    
    
    
    

    
    
    
    
    

  • center
    
    
    
    

    
    
    
    
    

• , 25%
  
  
  
  

  
  
  
  
  

CSS

CSS - « – ». , , JavaScript .

CSS : , , , . CSS – CSS-. , fuzzbuzz- CSS.

, “”, CSS.

, , CSS . , , , , .

, CSS : /, .

1: /

“potato”  border-style



. , / .banner



, . , CSS.

border-style

• ,

  
  
  
  
  

• , .

  
  
  
  
  

border-style



  dotted



, !

2:

calc()



CSS , . , .

font-size



p



(, 1.5rem



). font-size. , calc ()



(«2rem»



), .

- - font-size



1,5 rem



, body



.

3:

JavaScript, . .

: root



--color-cyan



#953FE3



. .square --color-cyan, . top , , background-color.

, .square



, «Don’t play to type.». .square



, .

, , , .

, CSS , CSS .

, , CSS .

, , - , , , . , .

-, stylelint, , CSS CSS- . stylelint , , GitHub, CSS .

-, Firefox CSS . , CSS. , .

CSSはプログラミング言語であったため、強く型付けされており、プログラミング言語としては長い間存在していました。また、最近は大きく成長しています。まだ気づいていない場合は、すばらしい新機能を利用できます。

強く型付けされたJavaScriptの人気が高まるにつれ、開発者が堅実でありながら柔軟なCSSアプローチに慣れることができるようになることを願っています。