Tip-calculator-Typescript-SCSS-Animation-Accessibility-Jest

I noticed that in the _calc.scss partial file, you used descendant combinators with quite a bit of nesting. For example:

.form {
   .input-container {
      .input-icon {}
   }
}

This compiles to CSS as: .form .input-container .input-icon {}

Using descendant selectors like .form .input-container .input-icon specifies styles based on a very specific structure. If you need to use .input-icon elsewhere, you'll have to recreate the same rules, leading to redundant code.

In large projects, this approach can cause issues due to the high specificity of descendant selectors, which can override other rules. This often leads to the overuse of !important to fix conflicts.

Consider using BEM (Block Element Modifier) to structure your rules more effectively. BEM works well with SCSS and can help manage specificity and modularity.

Another point is that you didn't break down the components, which affects adherence to the Single Responsibility Principle (SRP). Breaking down components could have facilitated writing more modular SCSS.

While you employed advanced concepts in React and TypeScript, focusing on these smaller details could enhance the overall quality of the code. Despite these issues, I really liked the end result and am excited to tackle this challenge myself now.

Hi,

I see you made this challenge second time. That's great that you want to improve 😃. One thing that I would change is the font-family. I see you have the default one but it should be the font specified in style-guide.md

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉