Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.
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 Parker218,694 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,726 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.