If you happen to come across this information like I did and aren't aware, the two examples above serve different purposes.
The first one:
.blue-border, .background {
border: 1px solid #00f;
background: #fff;
}
is used when you want to style elements that have either the blue-border or background class, such as:
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
All of these will have a blue border and white background applied to them.
However, the solution provided in the second example is different.
.blue-border.background {
border: 1px solid #00f;
background: #fff;
}
This code applies styles to elements that have both classes, so only the <div> with both classes should be styled (if the CSS is interpreted correctly by browsers):
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
In essence, think of it like this: using a comma applies to elements with one class OR another class, while using a dot applies to elements with one class AND another class.