How often should I use child/sibling selectors in CSS? [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working with other developers and as much as possible, I want them to understand the HTML/CSS code I wrote when they take over a particular project.
So, I have this simple snippet.
<section>
<div class="twocolumn">
<div>
<p>Hello</p>
Press
</div>
<div>
<p>Nice one!</p>
Click
</div>
</div>
</section>
To target inner elements in this code, which is better practice, to use selectors that begin from the outermost element (section) so that another developer will understand the "arrangement" of the elements as such:
section > div div:nth-child(1) p + a {
...
}
or should I make use of the classes like this:
.twocolumn a {
...
}
Which do you think is easier to read (for other developers)? What are the pros and cons for each process? Can you give other examples?

Answer 1

First off, your selectors don't tally. .twocolumn a by itself will match both a elements since you didn't specify to look only in div:nth-child(1).
That aside. Remember that the sole purpose of combinators in CSS selectors is to establish relationships between two or more elements in markup. So a sibling combinator says "this element must be a sibling following that one", a descendant combinator says "this element must be contained within that one", and a child combinator says "this element is a child of that one". If you do not need to enforce a specific relationship between two element (typically this comes from assumptions you make about the structure of your page), then you probably do not need to specify that many elements in your selector.
Taking your snippet for example: if you can guarantee that every inner div within that structure has a p followed by an a, you can leave out the p +. You only need it if a can appear elsewhere and you want to make sure you only target a if it directly follows p.
Next, if you can guarantee somehow that every section > div will have the class .twocolumn, then you can just use the class selector. I find that really unlikely given what the class name is supposed to describe, but assuming that it is the case, then if you want to select the first a only you will need div:nth-child(1) at least:
.twocolumn div:nth-child(1) a {
...
}
I can't offer much more general advice because it really depends on your requirements and what you are working with. But I will say that you should keep a balance, i.e. don't rely completely on the structure of your markup, use classes and IDs to point to key elements where possible. As mentioned in another answer, you want to avoid tightly coupling your CSS and your HTML causing you to have to change your selectors to reflect any potential changes in the HTML structure.
But do still account for a small set of possible variations in the structure, like with the p + a example I mentioned above, so you don't end up overusing classes and bloating your markup unnecessarily. Web applications are so dynamic these days, and CSS provides a reasonably potent syntax for you to use, so don't be afraid to use it and to educate others about how it works.

Answer 2

Short answer: never.
Well not never exactly. The more complex your selectors are then the more coupled your CSS code is with your HTML. Change the HTML and then you must reflect the changes in your CSS selector code. Back and forth for each change means more manual work to ensure your design isn't broken.
Ideally you want to use as many CSS classes as you can with no more than one level of child selectors. Best to use the > operator to target direct children rather than relying on the ancestor selectors.
This is my opinion obviously, but I have been developing websites for over 10 years. A good philosophy to follow (where I learned most of this from) is from SMACSS.
Keep in mind that it isn't always about markup. There's a break-even point between clean markup and sane CSS code. I've just found that by using multiple CSS classes then you have the maximum about of reusability.

Answer 3

As general best practice, less specific selectors are better. In this case, you probably wouldn't want to target EVERY <a> tag inside your .twocolumn div. A more specific selector would most likely be best, depending on what you're actually trying to do. If possible, you should add a class to the <a> tag and target .twocolumn a.classname.

Answer 4

The more specific selector the faster it will be handled.
In this case:
section > div {}
style resolver will look on the element and its immediate parent. That is O(1) computationally complex task.
But this one
section div {}
in worst case will have O(d) complexity, where d is a depth of DOM tree.