В чем причина наличия (квадратных) скобок в имени класса элемента?

Question

Я был очень удивлен этим утверждением class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" в шаблоне начальной загрузки 3 и я не уверен, что разница между

class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" 

и

class="col-xs-12 col-sm-offset-1 col-sm-5" 

Можете ли вы дать мне более подробную информацию о значении из этих скобок и в некоторых случаях, когда они используются?

Answer 1

Это не что иное, как визуальное разделение классов с целью их группировки.

Пример, который вы дали обе, делает то же самое.

Кронштейны допускаются в атрибуте класса и являются технически действительными, если у них есть пробелы между скобкой и самим классом.

Дополнительная информация об этой технике можно найти на csswizardy, и для потомства, вот отрывок объясняет, как он использует его:

Как это работает

Там нет жестких и быстро правило о том, как и когда начинать группировку ваших классов, но для меня установлены следующие правила:

Должно быть более одного «набора» классов. Один «набор» должен содержать более одного класса. Это в основном только ringfences любые группы, которые нуждаются в ней, например:

<!-- Only one set. Nothing needs grouping. --> 
<div class="foo foo--bar"> 

<!-- Two sets, but only one class in each. Nothing needs grouping. --> 
<div class="foo bar"> 

<!-- Two sets, one of which contains more than one class. This set needs grouping. --> 
<div class="[ foo foo--bar ] baz"> 

<!-- Two sets, both of which contain more than one class. These sets needs grouping. --> 
<div class="[ foo foo--bar ] [ baz baz--foo ]"> 

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

Answer 2

В основном это только там, чтобы сделать код как-то лучшечитаемым.

По: Which characters are valid in CSS class names/selectors?

~ ! @ $ %^& * () + = , ./' ; : " ? > < [ ] \ { } | ` # 

являются недействительными только селектор класса, но только для использования его в атрибут класса она действует. Если вы все еще хотите добавить один из символов выше для своего селектора классов, вам нужно сбежать от него, используя \, который выглядел бы как-то так: \[ для персонажа [.

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