Ինչու՞ է ampersand (&)-ի օգտագործումը նախապատրաստիչներում բացասական կողմեր ունի։

• Տեղադրության խորության դեպքում ընթերցելիության վատթարացում:
• Կոդի հասանելիության և դեբագիրման բարդություն բազմաթիվ կոնտեքստերով սելեկտորների ներսում:
• Պոտենցիալ կոնֆլիկտներ վերափոխման ժամանակ, եթե պարզ չէ, թե ampersand-ը որ ծնողական սելեկտորին է պատկանում:
• & կարող է հանգեցնել տարրերի համար ավելորդ ոճերի, ինչը CSS-ը դարձնում է ավելի քիչ արդյունավետ:

Օրինակ՝

.parent {
  // ...
  .child {
    // ...
    &--modifier { // Կոնտեքստ՝ .parent .child--modifier
      // ...
      &-nested { // Կոնտեքստ՝ .parent .child--modifier-nested - դառնում է ավելի քիչ հստակ
        color: red;
      }
    }
  }
}

Մյուս օրինակով կարելի է տեսնել, թե ինչպես &-ը կարող է թաքցնել իրական սելեկտորը:

.btn {
  // ...
  &-primary { // Համապատասխանում է .btn-primary
    background-color: blue;
  }
}

Վերափոխման ժամանակ, եթե փոխեք .btn, պետք է հիշեք նաև փոխել -primary-ը։ Անհրաժեշտ է օգտագործել առանձին դաս .btn-primary, որը կարող է լինել ավելի հստակ և դիմացկուն փոփոխությունների նկատմամբ։