У меня разные правила для разных случаев. Как оптимизировать CSS стили, чтобы прописать свойство cursor: pointer один раз?

Question

[Kostiantyn]

Есть разные правила для определенных случаев. Нужно оптимизировать стили, чтобы свойство cursor: pointer было прописано один раз, при этом сохранив правила для разных случаев. Как это можно реализовать?

.product {
  &.grid .grid-product__text:not(._price),
  &.grid .grid-product__text._price,
  &.grid .grid-product__text .grid-product__text_inner {
    color: inherit !important;
  }

  &._photo-name-transition {
    ._name,
    ._image {
      cursor: pointer;
    }
  }

  &._name-transition {
    ._name {
      cursor: pointer;
    }
  }

  &._photo-transition {
    ._image {
      cursor: pointer;
    }
  }
}

Comments

[Сергей delphinpro]

Код картинками не выкладывайте.
Вот как мне его скопировать, что бы показать правильный пример? Вручную что ли набирать?

[Ankhena]

Картинки иногда удобны (сразу видна подсветка), но к ним точно должна быть песочница и код текстом.

[Kostiantyn]

Сергей delphinpro, верно, был не прав. Поместил сам код.

Answer 1

[Сергей delphinpro]

Использовать экстенды

%cursor-pointer {
  cursor:pointer;
}

.product {
  &.grid .grid-product__text:not(._price),
  &.grid .grid-product__text._price,
  &.grid .grid-product__text .grid-product__text_inner {
    color: inherit !important;
  }

  &._photo-name-transition {
    ._name,
    ._image {
      @extend %cursor-pointer;
    }
  }

  &._name-transition {
    ._name {
      @extend %cursor-pointer;
    }
  }

  &._photo-transition {
    ._image {
      @extend %cursor-pointer;
    }
  }
}

Output:

.product._photo-name-transition ._name,
.product._photo-name-transition ._image,
.product._name-transition ._name,
.product._photo-transition ._image {
  cursor: pointer;
}

.product.grid .grid-product__text:not(._price),
.product.grid .grid-product__text._price,
.product.grid .grid-product__text .grid-product__text_inner {
  color: inherit !important;
}

Вместо этих заморочек, можно прогнать код через какой-нибудь css-оптимизатор, который умеет группировать свойства. Тут главное правильно его настроить.

Comments

[Kostiantyn]

Спасибо большое! Очень помогли.

Answer 2

[Михаил]

Использовать mixin-ы

Comments

[Kostiantyn]

Спасибо.

[Сергей delphinpro]

Миксины не оптимизируют код на выходе. А автор вроде как об оптимизации и задумался.