Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
April Ehrlich
4,164 Points"Never mix functionality and presentation in selectors." What does that mean?
In the Responsive Text & Vertical Rhythm video on the Web Typography (Stage 8) stage of the CSS course, Guil says, "Notice how I am using a separate ID of title and not class name because we should never mix functionality and presentation in selectors." (3:56)
This is the HTML element:
<h1 id="title" class="title">Choosing A CSS Preprocessor</h1>
And this is the point in the HTML where he selects the ID 'title' and makes that comment:
<script type="text/javascript">
$("#title").fitText(.83, { minFontSize: '46px', maxFontSize: '72px' });
</script>
I guess I'm confused as to why he says that comment about presentation and functionality. Do ID and class selectors somehow differ in that regard? I thought the only difference between the two was that an ID selector can only be used once, whereas a class selector can be used on many different elements. Is there some sort of functionality versus presentation use that differentiates these two selectors?
5 Answers
Kevin Korte
28,148 PointsYou're spot on about classes and IDs. IDs should only be used once, while classes can be reused. I'll add to it that IDs have more specificity than classes in CSS when a browsers decides which style overrides the other based on specificity. If you don't understand that yet, you'll eventually get there in the CSS lessons, as they go over that.
What he is referring to is more of a best practices thing. In general, you'll find this common among many websites, we use classes to add presentation or layout styles, and when we need to add a functionality to something, say with like jQuery, we use an ID. The browser really doesn't' care, but this is more human friendly.
When you follow this best practice, and you see an ID attribute, you can than assume that ID is doing something, and that can help keep larger projects a bit cleaner.
Marko Koron
20,658 PointsHe meant functionality for Javascript (jQuery) and presentation for CSS.
David Tonge
Courses Plus Student 45,640 PointsID selectors are usually used for JavaScript hooks because they're heavier specificity-wise than Class selectors(See link below). It takes about 200+ class selectors to override a single ID selector and even more in certain browsers. I'll also note that as far as using JavaScript cross-browser the getElementById(); is the safest JS selector you could use.
April Ehrlich
4,164 PointsAh! Thank you everyone for your responses. I forgot that ID selectors had more specificity. I have been watching a ton of videos but not actually implementing these skills, so I'm not as versed on "best practices" decorum yet. Thanks again!
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsHi I had the same question. Good question, great answers. I totally get it.