Лучше ли связывать CSS-классы или называть их отдельно для модульных целей?

Question

Например, что лучше:

Метод 1 (назовите классы отдельно):

/* CSS */

.textbox-red, 
.textbox-green {
   padding: 10px;
   border: 1px solid #CCC;
   border-radius: 10px;   
}

.textbox-red { color: #900; }
.textbox-green { color: #3c3; }

/*HTML*/

<div class="textbox-red"></div>
<div class="textbox-green"></div>

ИЛИ ЖЕ ------------

Метод 2 (цепочка классов):

/* CSS */

.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.textbox.text-red { color: #900; }
.textbox.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

Что является лучшей практикой среди двух?

Answer 1

Мое мнение таково, что вы должны использовать модульную CSS - вы также можете комбинировать классы вместо того, чтобы связывать их:

/*CSS*/
.textbox {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.text-red { color: #900; }
.text-green { color: #3c3; }

/*HTML*/

<div class="textbox text-red"></div>
<div class="textbox text-green"></div>

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

Answer 2

Лично я бы выбрал способ 2. Таким образом, вы можете легко заменить текстовый красный или текстовый зеленый на синий или текстовый желтый и при этом сохранить основной стиль для вашего текста. По сути, метод 2 предусматривает большую гибкость и ремонтопригодность, ИМХО.

Answer 3

По моему опыту модульный подход дает вам наибольшую гибкость. Модульный шаблон CSS также используется в Twitter Bootstrap, где гибкость очень важна.

Answer 4

Сначала лучше, если вы создаете стиль для IE6, потому что этот браузер не поддерживает второй метод.