Malcolm Stretten3,814 Points
.primary-col and .secondary-col
Why does Guil first define .col and float it left and THEN define .primary and .secondary and just define their widths?
I thought you just had to define .primary-col and float it right at 60% fluid width and then define .secondary-col and float it left at 40% - but that doesn't do anything. Surely primary-col is a class and secondary-col is another class. Why is it split into 3 classes: .col .primary and .secondary????
Steven Parker172,196 Points
The shared class "col" allows you to apply all the properties that are common to the columns using just one rule. This makes the code more compact than repeating the common properties in separate rules, and implements the "DRY" principle ("Don't Repeat Yourself!").
Then the individual classes of "primary" and "secondary" allow you to target each column individually to apply only the properties that are different.
You could have classes with names like "primary-col", but they would need to be matched by the CSS selectors. And it would provide no functional difference from using the name "primary". The hyphen has no significance to CSS.
Richard Verbraak7,687 Points
First, I am no expert on CSS floats, I find them tricky to use compared to other techniques you'll learn later on but I'll try my best explaining. (someone feel free to correct me if I'm wrong here)
Guil first floats both columns left so they appear on the same line, he targets them with the class .col since both columns share that class.
Then he defines a width for both of them, so that each of the columns appear next to each other. He does this with their respective classes like .primary and .secondary.