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

Question

我对bootstrap 3模板中的这个语句class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]"感到非常惊讶，我不确定

之间有什么区别

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

和

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

请您详细说明这个括号的含义以及使用它们时的一些情况？

Answer 1

除了在视觉上分离类以分组它们之外，这只不过是其他了。

你给出的例子都做了同样的事情。

括号在class属性中是允许的，并且在技术上是有效的，只要它们在括号和类本身之间有空格。

有关此技术的更多信息可以在csswizardy找到，对于子孙后代，这里有一段摘录，解释了他如何使用它：

  

工作原理

     

关于如何以及何时开始分组，没有严格的规则   你的课程，但我为自己设定的指导原则是：

     

必须有多个“套”类。一个'集'必须包含   不止一堂课。这基本上只是响应任何团体   需要它，例如：

<!-- 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的答案，而不是我的答案 - 仍然是可读性的相同想法，但更详细的原因以及如何使用的参考。