Zagnieżdżanie elementów w scss

Siema, czy podana składnia jest dobrym rozwiązaniem? Czy lepiej nadać klasy osobne na label i input

&__form--group {
    background: $bg-gray;

    display: flex;
    flex-direction: column;

    margin: 10px 0;
    padding: 8px 20px 12px 20px;

    border-radius: 10px;

    label {
      color: $black;

      padding-bottom: 6px;

      font-size: 12px;
      font-weight: 700;
    }

    input {
      border: none;
      background: transparent;
    }
  }

&_form--group to element div

jak dla mnie jest ok

Używasz metodologii BEM, więc według mnie lepiej by było napisać to tak:

// Jako bloki
.form-group {
   ...
}

.form-label {
   ...
}

.form-input {
   ...
}

// Jako elementy
.form {
  &__group {
     ...
  }

  &__label {
     ...
  }

  &__input {
     ...
  }
}

Osobiście, wybrałbym bloki dla lepszej czytelności kodu.

Pamiętaj też, że składnia "form--group", którą napisałeś to modyfikator, a je używa się raczej w taki sposób, przykład:
Ostylowanie inputa, który ma niepoprawne dane: ".form-input--invalid"

Warto sobie poczytać w wolnym czasie: https://en.bem.info/

@cerrus:

<div class="container__form--group">
      <label for="phoneNumber">Numer telefonu</label>
      <input id="phoneNumber" type="tel" placeholder="123 456 789" formControlName="phoneNumber">
    </div>

Dodawanie tu tyle klas gdy mam tajkich form gorup z 10 jest sensowne? Utrace duzo na czytelnosci gdy na kazdym labelu bede musial dawac kolejna klase i na inputach to samo

Wydaje mi się, że jeśli idziesz w BEM to lepiej stylować elementy za pomocą klas. Może w kodzie HTML będzie więcej pisania ale jak patrzę na twój fragment kodu HTML i kierunek w jakim idziesz (.container i stylowanie elementów za pomocą &__) to zaraz zrobi ci się niezły syf w stylach. Załóżmy, że dodasz sobie kolejne komponenty, np. .container__button, .container__accordion itd., wyobraź sobie, że takich komponentów napiszesz 20 i jak to będzie wtedy wyglądało w pliku SCSS?

like