Interactive Rating componentの実装

5258 ワード
CSS newbie forntend html js frontend-mentor-challenge テキストリンク

質問する


質問リンク

result


github codeリンク
完全なリンク

新学


css


  • constant var css
    :root {
    --mobile-width: 375px;
    --desctop-width: 1440px;

    --very-dark-blue: hsl(216, 12%, 8%);
    --dark-blue: hsl(213, 19%, 18%);
    --medium-grey: hsl(216, 12%, 40%);
    --light-gray: hsl(217, 12%, 63%);
    --white: hsl(0, 0%, 100%);
    --primary: hsl(25, 97%, 53%);

    --font-size: 15px;

    --font-family: Overpass;
    --font-weight-small: 400;
    --font-weight-big: 700;
  }
  • cssは変数として格納して再利用できる.

  • css分離(インタフェース分離の原則に類似)
  • cssの機能は細分化して再利用できる.
  • ex)hidden、flex-center、hoverableランプ

  • :beforeを使用して直接コンテンツを挿入できます.

  • labelとinput styleを使用してカスタマイズできます.
    input[type='radio'] {
       display: none;
     }
input[type='radio']:checked + label {
 color: var(--white);
 background-color: var(--light-gray);
}

    • html

  • fieldsetを使用して無線入力を管理できます.
    • 小包
  • img tagの場合、容器としてデジタルタグを使用できます.

    • js

  • formDataオブジェクトを使用すると、formオブジェクトのデータを簡単に抽出できます.

    • 考慮すべき部分


    もっと効率的に管理できないのか
  • css?
  • ・scssで使えるmixIn機能は純粋cssには無いのでしょうか?
    • 使用
  • シンプルFormDataでもobserver patternいいですか?
    • 匿名の構築方法とShutDownHook
    すべてのPython unit 08挿入を整列