Skip to content

Selector

Rule

Using classes for CSS selectors is generally considered good practice in web development. Here's why:

  • Reusability - Classes can be applied to multiple elements, making your CSS more reusable and DRY (Don't Repeat Yourself).
  • Specificity management - Classes have lower specificity than IDs or inline styles, making them easier to override when needed, while still being more specific than element selectors.
  • Performance - While the performance difference is negligible in most applications, class selectors are more efficient than complex descendant or attribute selectors.
  • Separation of concerns - Classes allow you to separate styling from document structure and semantics.
  • Maintainability - Classes like .header, .nav, or .button-primary make your code self-documenting and easier to maintain.

Example

🚨 DON’T

#floating-footer {
  @extend %display-flex-center;
  @include size(100%, 64px !important, 1366px);

  justify-content: space-between;

  #action-container {
    @extend %display-flex-center;
    @include size-2();

    justify-content: flex-end;
    padding: 0 3%;
    box-sizing: border-box;

    #right-button {
      @extend %display-flex-center;

      justify-content: flex-end;
      width: 100%;
      font-size: 14px;
      gap: 3%;
    }
  }
}

✅ DO

.floating-footer {
  @extend %display-flex-center;
  @include size(100%, 64px !important, 1366px);

  justify-content: space-between;

  .action-container {
    @extend %display-flex-center;
    @include size-2();

    justify-content: flex-end;
    padding: 0 3%;
    box-sizing: border-box;

    .right-button {
      @extend %display-flex-center;

      justify-content: flex-end;
      width: 100%;
      font-size: 14px;
      gap: 3%;
    }
  }
}