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
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,543 PointsI prefer just giving classes to specific elements in the HTML.
I found that I end up never using this and instead just give the elements specific classNames. Here is an example:
<HTML> <ul> <li></li> <li class="li-green-background"></li> <li></li> </ul>
<CSS> .li-green-background { background-color: green; }
It helps me keep track of what's actually going on and trace back through code I have written in the past.
It's a little extra work copy-pasting these into the HTML but it's not a big deal.
Now, I'm wondering if there is anything wrong with this I haven't thought of. Maybe the page loads slower with classes? But would it be more than a few milliseconds? Or whatever.
I like to make things simpler where they can be simpler because code is complex enough when it needs to be. I'm just checking if there is implications I'm not aware of.
Thanks!
2 Answers
Brad Meraly
7,242 PointsWIth that approach, you are writing in very specific class names in your HTML markup. In the future, if you want to change the style of that element to say a blue background, your HTML markup would not represent the correct description. So you have to touch both your HTML and CSS to make a simply style change. By using a generic class on the parent element and targeting the element you need in CSS makes it much easier to modify styles as your design evolves. Also, “li-green-background” is very specific and doesn’t include other details in the description. Whereas in the CSS, you might want additional styles attached to that class.
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,543 PointsYes, li-green-background might not have been the best description. I'm sure I never ran into the problem because I haven't had to redo the entire color scheme on any of my projects yet. Wouldn't a className of: "head-nav-first-li" resolve that? If I need such specific instructions on a design where I want that specific LI to be highlighted I would do that. If I need highlights more often on specific items I would just make a class called highlight_1 and apply it to everything I wanted to highlight.