Ответ 1

Вы должны использовать расширение только тогда, когда у вас есть определенный набор атрибутов, который будет использоваться несколько раз. Явная глупость расширения класса с классом с одним атрибутом, который имеет единичное значение, сработавшее во имя его, непонятно.

Лучший пример для расширения можно найти в справочном руководстве

Скажем, у нас есть 2 класса

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

.error - общий не интересный стиль, но серьезная ошибка должна быть действительно понятной.

.seriousError создается для утолщения строки, единственная проблема заключается в том, что теперь мы должны использовать оба класса в html для объединения стилей.

Поскольку мы ленивы и просто хотим использовать один класс, а не дублирующий код, который может быть изменен в будущем, мы можем расширить .seriousError с помощью .error

.seriousError {
  @extend .error;
  border-width: 3px;
}

Теперь мы не дублировали код в нашем sass файле, но получили правильные стили на странице.

Ознакомьтесь с справочным руководством для получения более/лучших примеров.

Просто прошу, чтобы котята перестали расширять классы одним классом атрибутов. И неявно указывать значение/атрибуты в селекторе, это не очень семантично.

Вы и ваша команда должны прочитать это сообщение, что объясняет некоторые проблемы с aproach, которые вы принимаете здесь, вместо семантического кода. Не удалось найти улучшенную настройку.

Ответ 2

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

Возможно, одна (плохая) причина, я могу себе представить, почему это будет использоваться. Если, например, .font-10 должен быть .7em вместо 10px, его можно легко изменить - , но, то вы просто победили точку именования класса "font10". Что-то вроде small-font будет иметь больше смысла в этом случае (и я не предлагаю вам это использовать).

Я не буду обсуждать достоинства семантических названий классов и глупость презентационных (особенно как литерал, как они есть), но я буду предлагать, что это очень узкое использование расширяющих классов. При сопоставлении 1:1 имени класса с свойством/значением вы практически победили цель @extend, которая должна заставить вас писать меньше CSS.

Лучший пример использования @extend для:

.media {
    padding:1em;
    border-color:blue;
    background-color:red;
    clear:left;
}

.my-media {
    @extend .media;
    background-color:green;
}

Ответ 3

Атомный CSS

Техника очень простых правил CSS имеет немного прецедента - на Yahoo! они называют это Atomic CSS. Тьерри Кобленц утверждает в эту статью Smashing Magazine для использования простых классов непосредственно в вашей разметке, аналогично встроенному стилю. Это может быть полезно при очень больших проектах через несколько веб-свойств, где стили несовместимы. Базовые стили для компонентов OOCSS нельзя использовать повторно в такой ситуации, заставляя вас писать еще много строк расширений или переопределений.

Недостатком, конечно же, является Уэсли, что гораздо сложнее внести изменения во все стили проекта, например, обновить размер текста специфический селектор.

Недавно я играл с вариантом этой техники в довольно большом проекте, где стили часто бывают разовыми. Стремясь избежать этого, я стараюсь избегать ввода жестких значений непосредственно в селекторах. Например, следующий css (пример скрипта):

_colors.scss

.text-white {
  color: $white;
}

.blue {
  @extend .text-white;
  background: $blue;
}

_effects.scss

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
}

.matted {
  border: 4px solid $white;
}

.shadow {
  @include box-shadow(0 1px 4px 1px rgba($black, 0.25));
}

HTML:

<div class="blue matted circle shadow">?</div>

Проблемы с конкретностью

Последнее, что нужно иметь в виду, если вы решите использовать этот метод - это может вызвать проблемы с конкретностью, если вы расширяете классы базового уровня, которые используют одни и те же свойства CSS. Например, в следующем примере (fiddle), как бы появился ваш пограничный радиус? Вы хотели, чтобы верхняя часть была квадратной (без радиуса границы), но этого не происходит, потому что класс .circle находится ниже в вашем css и точно так же специфичен (один класс), как и другие эффекты. Это немного надуманный пример, но если вы повторно используете свойства CSS для своих атомных селекторов, это может быть реальной проблемой.

_colors.scss

.text-white {
  color: white;
}

.blue {
  @extend .text-white;
  background: royalblue;
}

_effects.scss

.squared-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded {
  border-radius: 10px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

HTML:

<span class="circle blue rounded squared-top"></span>

Ответ 4

Если вы это сделаете, вы также можете использовать его непосредственно в HTML-формате, так что похоже, что они взяли путь OOCSS и потому что он уже находится в CSS, теперь вы можете также расширить его. Очень гибкий, но он также может стать очень грязным.