CSS CSS Selectors Advanced Selectors :nth-child

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,527 Points

I 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!

Brad Meraly
Brad Meraly
6,912 Points

WIth 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.

1 Answer

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,527 Points

Yes, 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.