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

[egor-a-trubnikov-panov]

допустим по 7 цветов для каждого размера

[makishvili]

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

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

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

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

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

[egor-a-trubnikov-panov]

<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-* {
  ............
}
............

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

[makishvili]

или так:

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

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

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

[egor-a-trubnikov-panov]

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

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

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

[makishvili]

Значит так :)

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

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

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