Что если input помимо размера может иметь еще и разный цвет ? about docs HOT 5 CLOSED

Я сомневаюсь, что в реальном проекте может появиться задача в том виде, в котором вы предложили её нам. Ну кому может понадобиться семь разных цветов для инпутов? Я не представляю себе такой проект.

Единственное, что я могу предположить - инпуты становятся красными, если его содержимое невалидное; желтыми, если содержимое допустимое, но нужно показать ворнинг; зелеными - если содержимое валидное.

В таком случае разные цвета инпутов будут формироваться разными состояниями инпута, типа _valid, _invalid, _warning (названия не самые удачные, первое, что пришло на ум)

.input._valid {border: green}
.input._invalid {border: red}
.input._warning {border: yellow}

А сами состояния инпуту мы будем выставлять из javascript.

from docs.

<input type="button" value="Ok"/>  :)

Кнопки могут быть разного размера и иметь разный цвет.
Более того в недалеком будущем могут появиться еще и кнопочки например, со смайликами :)
И они тоже должны иметь разный размер и цвет.

.button_color-red_size-XL_icon-smile {
  button_skin_base($height= 50px);
  background-color: #f00;
  background-image: url('smile.png');
}

.button_color-*_size-*_icon-smile {
  ............
}
............


.button_color-red_size-XL {
  button_skin_base($height= 50px);
  background-color: #f00;
}


.button_color-*_size-* {
  ............
}
............

.button_size-XL {
  button_skin_base($height= 50px);
}

.button_size-* {
  ............
}
............

получается как-то так?

from docs.

или так:

/* красные */
.button_big-alert {}
.button_small-alert {}

/* желтые */
.button_big-warning {}
.button_small-warning {}

В имена вьюх мы не вшиваем значения css-свойств. Мы даём имена по смыслу: большая тревожная кнопка, малая тревожная кнопка. Чтобы человеком это читалось, как текст.

from docs.

Это хорошо когда цвет кнопки определяет ее специфику.
Но если цвет это просто цвет тогда кроме как вписать наименование этого цвета ничего не остается.
Получается, в случаи с кнопкой со смайликом:

/* Кнопка очень большая красная со смайликом :) */
.button_ExtraLarge-Red-WithSmile {}
/* Кнопка большая желтая со смайликом */
.button_Large-Yellow-WithSmile {}
/* Кнопка нормальная зеленая */
.button_Normal-Green {}

Это уже больше похоже на фамилию, тем более на мою :)

from docs.

Значит так :)

Как бы вы решали эту задачу раньше? Так же, только множественными классами:

<div class="button extra-large red with-smile">

Мы сделаем это одним классом.

from docs.