Choosing the better Selectors?

General Web Dev
1

Continuing the discussion from How to add an element after the opening body tag on an empty HTML page?:

Sometimes I need them for JavaScript, PHP, or other scripting.
Sometimes I need them for CSS

I have learned to not bother targeting multiple elements that have id values in a single path

But I still tend to be more “over-selective” than I need to be.

For example, I’ll use div.main instead of only the class like .main even if no other tag types besides <div> have the class .main

And I hardly ever feel comfortable using anything other than a longer path.

I know, “It depends”

But tips and tools would be appreciated.

2

I’m a fan of Block-Element-Modifier (BEM). The idea is, you name your classes like this:

.widget
.widget--modifier
.widget__subobject
.widget__subobject--modifier

So, for example, instead of .header img, you’d do .header__image.

You’ll almost never need element or ID selectors; you’ll have very simple specificity rules; and the namespacing means class names won’t clash.

3

TBH every developer develops their own system after a while. There are advantages and disadvantages of each naming scheme. It depends whether other developers will inherit your code, the size of the project, etc.

I’m not a fan of BEM or OOCSS or any other CSS naming scheme which claims to make it easier. For me, it actually overcomplicates matters.

4

I rarely see a benefit to using ‘div’ as a prefix to classes or ids (div.main) as that just causes code bloat as there are often many divs in the page. It would also then be awkward to have separate styles for say p.main without causing some confusion. Just use .main and if you do need different rules for p elements you can use a different class such as .maintxt instead. It just makes things simpler.

I do however tend to identify ul or ol elements when they have classes because I need to be sure that I have removed the margin,padding and bullets.

e.g. ul.menu{}

Just by looking at the css I can tell that the class applies to a ul and I will know to remove the margin,padding and bullets.

In the end it does come down to a personal choice and a choice depending on the environment you are working in (where others may have access to the code also).

I find the ‘.widget__subobject–modifier’ method hard to comprehend when reading through others html and working out what rules apply to certain elements as I soon forget if I was looking at ‘.widget__subobject–modifier’ or .‘widget__subobject’ when subsequently looking through the css. They all just merge into one for me and I become ‘class blind’. I understand and appreciate the methodology but it just doesn’t do it for me unfortunately.

Indeed this has happened today on a question I was looking at in someone’s fiddle and I just could not remember the structure in my head in order to answer the question and had to resort to developer tools to keep track which on a fiddle is awkward.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.