Should we use CSS child selectors or CSS class based selector?

Question

Which one is the better way to select the child div in following HTML code in terms of performance and optimizations?

Options 1:

<div class="parent-div">
  <div></div> <!--- child DIV !--->
</div>

// CSS

.parent-div > div {
  // Some CSS for child div
}

'

Options 2: (selecting using a className/id)

<div class="parent-div">
   <div class="child-div"></div>
</div>

// CSS

 .child-div {
    // Some CSS for child div
 }

Second option will be better for performance because it will only find target element by class name to apply css instead of finding on child div. — Priya jain, Jul 26 '19 at 13:22

score 3 · Answer 1 · answered Jul 26 '19 at 13:20

3

Option 2 is way better for code maintainability.

I recommend reading the BEM naming convention guide.

<div class="block">
   <div class="block__elem"></div>
</div>

answered Jul 26 '19 at 13:20

Peter Van de Laar

399
2
11

a very useful resource, but unfortunately most of the HTML templates that are sold and distributed in the market are assigned CSS properties throughes the parent elements. – ariferol01 Jul 26 '19 at 13:52
You are right about that. However whenever i'm fully in control of the codebase i try to stick to the BEMguidelines! – Peter Van de Laar Jul 26 '19 at 14:05

score 0 · Answer 2 · answered Jul 26 '19 at 13:31

That depends, if the child is "component" of its own, I would give it a class. but if it is just being a part of some parent component, I would use the .class > element option.

My point of view is based on Angular and its CSS separated on a component level. The benefit of that is, that you will not end up with an overwhelming file.

Should we use CSS child selectors or CSS class based selector?

2 Answers2