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

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

Способ 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>

OR ------------

Метод 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>

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


css oocss
person catandmouse    schedule 08.02.2013    source источник
comment
Вы не должны называть классы или идентификаторы такими вещами, как text-red, поскольку это указывает на дизайнерское решение в имени класса, которое может измениться позже, например. этот цвет, возможно, придется изменить на фиолетовый, поэтому вы измените его в CSS, после чего у вас появится фиолетовое текстовое поле с именем text-red. Таким образом, в этом случае вы можете назвать свои текстовые поля text-one или некоторые из них.   -  person Billy Moat    schedule 08.02.2013
comment
Принято к сведению. Это просто для примера. Обычно я использую text-alert или text-success или что-то в этом роде.   -  person catandmouse    schedule 08.02.2013

Ответы (4)


arrow_upward
5
arrow_downward

Я считаю, что вам следует использовать модульный 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>

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

person NielsInc    schedule 08.02.2013
comment
Или, как сказал @BillyMoat: используйте текстовое оповещение или текстовое предупреждение. Но в любом случае, я хочу сказать, что эти общие классы можно использовать повторно, когда они не связаны с текстовым полем. - person NielsInc; 08.02.2013

arrow_upward
1
arrow_downward

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

person Matt Whitehead    schedule 08.02.2013

arrow_upward
0
arrow_downward

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

person Flauwekeul    schedule 08.02.2013

arrow_upward
-2
arrow_downward

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

person Genson    schedule 08.02.2013
comment
Независимо от вашего английского, ваш комментарий на самом деле содержит ложную информацию. IE6 ПОДДЕРЖИВАЕТ цепочку (например, метод 2), но может быть немного сложнее при вычислении специфичности и порядка селекторов. Взгляните на этот поток: stackoverflow.com/questions/2626370/ - person Marakoss; 06.01.2016