What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

.element .symbol

means .symbol inside .element

.element.symbol

means .element that has the class symbol as well.

So,

.element.large .symbol

means .symbol inside .element that has the class large as well.

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
    <div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
    <div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

Using

.element.large

refers to an element with both classes:

<div class="element large"></div>

rather than a descendant of an element:

.element .large

meaning that in:

<div class="element">
    <div class="large"></div>
</div>

only

<div class="large"></div>

is 'receiving' the styles.

Basically, being separated by a space implies two elements with a descendant relationship.