Clarify usage of initial vs combined

[simonsmith]

Some clearer code examples of what initial and combined are used for in the README would be very useful.

Relevant #130

[saulhardman]

Hi @simonsmith, to get this issue rolling (and to help me with another conundrum) could you describe/explain what the initial and combined component selectors are in the context of the following example?

.no-js .c-block .c-block__element {
  // ...
}

[simonsmith]

That selector is first broken up into sequences based on combinators. The CSS combinators matched against are " ", >, +, ~. The sequences for your selector are:

[".no-js", ".c-block", ".c-block__element"]

To recap the docs:

initial describes valid initial selector sequences — those occurring at the beginning of a selector, before any combinators If you do not specify a combined pattern, it is assumed that combined sequences must match the same pattern as initial sequences. In weak mode, any combined sequences are accepted, even if you have a combined pattern.

In your above example the initial is run on the .no-js. If you have not provided a combined then the initial is used for the combined and also run against .c-block and .c-block-element