8

I was really surprised by this statement class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]" in a bootstrap 3 template and I am not sure what is the difference between 

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

and

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

Can you please give me more details about the meaning of this brackets and some cases when they are used?

Salman A
  • 262,204
  • 82
  • 430
  • 521
Vintila
  • 95
  • 2
  • 5

2 Answers2

10

This is nothing more other than visually separating classes with the intention of grouping them.

The example you gave both do the same exact thing.

The brackets are allowed in the class attribute and are technically valid so long as they have spaces between the bracket and the class itself.

Additional information about this technique can be found on csswizardy, and for posterity, here is an excerpt explaining how he uses it:

How it works

There is no hard and fast rule as to how and when to begin grouping your classes, but the guidelines I’ve set for myself are:

There must be more than one ‘set’ of classes. One ‘set’ must contain more than one class. This basically just ringfences any groups that need it, for example:

<!-- 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 ]">

How you group them can be entirely your choice, the concept here just deals with the fact that we’re grouping things at all.

Emile Bergeron
  • 17,074
  • 5
  • 83
  • 129
xengravity
  • 3,501
  • 18
  • 27
4

Basically it's only there to make the code somehow better readable.

According to: Which characters are valid in CSS class names/selectors?

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

are invalid only as class selector but only for using it in the class attribute it's valid. If you still want to add one of the characters above for your class selector you need to escape it using \ which than would look somehow like: \[ for the character [.

I really like the answer from xengravity also more than mine - still the same idea of readability but with more details why and also with a reference on how to use.

Community
  • 1
  • 1
DominikAngerer
  • 6,354
  • 5
  • 33
  • 60
  • From [an answer](http://stackoverflow.com/a/6732899/1529630) of the question you linked: "any character except NUL is allowed as CSS class name in CSS". You can use `[` in a class selector, but you must escape it: `.\[` ([demo](http://jsfiddle.net/gpp0rrsr/)). – Oriol Apr 18 '15 at 15:32
  • Yes you are right - but only if you escape it. Writing only: `[` will cause problems - but I will add this hint for escaping to this answer. – DominikAngerer Apr 18 '15 at 15:44