Confused w/ syntactic assignment of classes in html

Question

So, I'm having trouble understanding the difference between commas to separate classes and the absence of them. Also, I am using 'Skeleton' style sheets for the grid system. Here's an example:

<div id="header_buttons" class="eleven columns, header_buttons">
  <button type="button"><a href="#">Github</a></button>
</div>

And for 'header_buttons':

.header_buttons {
  margin-left: 180px;
}

With the commas, I get my intended result:

But without them, I get this instead:

I know the basis of having multiple classes is to not use commas. But in my case, if I take them out, why do I not get my intended result?

Answer 1

Skeleton adds .column:first-child { margin-left: 0; } .column:first-child { margin-left: 0; } , so that rule will have higher specificity than .header_buttons { margin-left: 180px; } .header_buttons { margin-left: 180px; } .

Without the comma in your markup, .column:first-child { margin-left: 0; } .column:first-child { margin-left: 0; } is applied via skeleton and overwrites .header_buttons { margin-left: 180px; } .header_buttons { margin-left: 180px; }

When you add the comma there, that breaks skeleton's .column class so that rule no longer applies, and the rule you specified for .header_buttons applies.

You can see it here

 .header_buttons { margin-left: 180px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/> <div id="header_buttons" class="eleven columns header_buttons"> <button type="button"><a href="#">Github</a></button> </div> <div id="header_buttons" class="eleven columns, header_buttons"> <button type="button"><a href="#">Github</a></button> </div>