loopstudios-landing-page

Community feedback

• 

  P

  Habeeb Kareem•640

  @olaide-hokPosted 5 days ago

  Great job here.

  Your SASS did show consistent variables, typography mixin, responsive design, BEM-like structure, and accessibility.

  Some areas to improve on would be to consider

  1. Typography Mixin Overuse: The mixin is used for small, one-off styles (e.g., font-size: 14px), which adds unnecessary complexity. You can reserve the mixin for repeated typography patterns (e.g., headings) and use direct properties for one-offs. For example

    font-size: 14px;  // Direct property
    @include typography(14px, 'Alata', 400, 14px, 5px);  // Only if reused
  }
  

  2. Nesting Depth and Specificity: Over-nesting (e.g., header nav .menu) can lead to high specificity and hard-to-maintain code. You can limit nesting to 3 levels and use BEM-like classes for scalability for this particular project. For example:

  .header {
    &__nav {
      padding: 0 1rem;
    }
    &__menu {
      background: $color-black;
    }
  }
  

  3. For the hover and focus state on links, you can consider using the ::after pseudo selector and then style it to meet the design. This would give you room to adjust the width dynamically without affecting the text.

  Marked as helpful

  0

  ---

  

  P

  toshirokubota•720

  @toshirokubotaPosted 5 days ago

  @olaide-hok Thank you for your insightful suggestions. I will keep in mind your advices on mixins and nesting depth. I was concerned with the specificity when the nesting was growing deep and I had to scatter media queries to match the specificity of elements that need to be view size dependent. I will look into the use of pseudo elements for the hover/focus states of links. Thanks again!

  0