I would like to know which of these two approaches is better and follow the best practices. I omit the content.

No nested

.review-form__title {}

.review-form__file__button {}

.review-form__file__image {}

.review-form__content {}

.review-form__stars > .active {}

.review-form__submit {}

.review-form__conditions {}

@media screen and (width >= 750px)  {
  .review-form__title {}

  .review-form__file__button {}

  .review-form__content {}

  .review-form__conditions {}
}

Nested

.review-form {
  & .review-form__title {}

  & .review-form__file__button {}

  & .review-form__file__image {}

  & .review-form__content {}

  & .review-form__stars > .active {}

  & .review-form__submit {}

  & .review-form__conditions {}

  @media screen and (width >= 750px)  {
    & .review-form__title {}

    & .review-form__file__button {}

    & .review-form__content {}

    & .review-form__conditions {}
  }
}

I find the Nested approach something more organized and the nested media queries are quite useful, but I would like to know if there is some performance problems with nested due the specificity.

Thanks a lot for your responses.