元素类名中包含（方括号）括号的原因是什么？

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的回答也比我的更多 - 仍然是可读性相同的想法，但有更多的细节为什么，也有参考如何使用。