Is there a reason not to use a single non-nested class name as a CSS selector?

Question

If I have a container and a list of elements, I may have the following HTML markup:

<div class="container food foodcontainer"> <ul class="list foodlist"> <li class="listitem fooditems"></li> ... 

And I can use them in two ways (assuming using simple CSS and at least / sass or any other helpers). First, as usual:

 .food { /* style */ } .food .list { /* style */ } .food .list .listitems { /* style */ } 

Or, I can just refer to everything with the detailed descriptive name of the class:

 .foodcontainer { /* style */ } .foodlist { /* style */ } .fooditems { /* style */ } 

No more cascading relationships! Is there a reason not to do this for everything (so that each element refers to the same class / identifier name)? I (and people working on the same database) simply cannot be found to be much better in readability; in any case, we find unique and direct names that are easier to understand and also easier to search.

There was an ancient article that usually recommended shorter, more unique selectors for performance; In his latest update , he said that overall performance has changed for the better. But how much better? Is the shorter way even faster?

Answer 1

.food .list { /* style */ } intended only for elements with class list that are inside an element with class food .

.food > .list { /* style */ } only targets elimates with the list class, which are direct children of items with the food class.

.list { /* style */ } intended for any elements of the list class, regardless of their parent elements.

Generally, if you want you to focus only on an element in a particular element, and not on other elements that may have the same class, use the first or second part above, depending on your needs.

Of course, you can also give them unique classes to avoid their chain, but in IMO there is simply an unnecessary problem of remembering which classes you are already using. Also, I think it helps with readability when you bind them, rather than with unique classes - then it is easier to see in which elements these rules apply.

I would not worry too much about performance with any of them - unless you have massive sites.

You can read about CSS selectors here .

Answer 2

Well, you can give a class to each element, but the point of cascading relationships is to not give each class a class.

For instance:

 a{ /* style link elements some way */ } .some-div a { /* but in some-div they should look differently } 

In this case, you only need to set 1 class in the div. In addition, you would need to give each link element a class in your html, which is counterproductive.

Using relationships, you can be much more general and avoid getting to the point where you end up with names like header-logo-nav-link-first . You will need to remember this class, but you will also need to write it in each element. Ever seen a footer with 50 links?;)

In addition, the more specific you deal with your choices, the more priority your style will be.

Answer 3

Very interesting question. In essence, you have defined two dimensions for your class architecture. The first is the food dimension, which has a semantic meaning , and it applies to all things related to food. The second is the size of list , which is the size of the layout, and applies to all things related to lists and their layout.

This is a very smart way to break classes. This helps prevent food-related rules from “leaking” to list-related rules, and vice versa. Your HTML becomes a pure orthogonal combination of classes from class groups with different meanings. In my opinion, this is perfect. This follows a specific CSS design philosophy that combines smaller classes in different ways, which promotes reuse and improves readability. An alternative is kitchen sinks, which are harder to repeat and harder to read. This will tempt you to use pre-processors with features like @extend , and from now on everything will go down.

The technical term for defining singleton classes is "hyper targeting." Example id Food__orange-disabled--listitem . If you go down this route, you will spend the rest of your life writing and rewriting these bizarre class names. Each change will require changes for both CSS and HTML. Proponents of this approach argue that efficiency is one of the reasons for its adoption, and this could be a problem five years ago, but, as you already mentioned, today browsers process a reasonable amount of nested selectors without breaking a sweat.

Answer 4

I am revising this question because I have found newer and more recent articles and links.

In short, there should be no reason to stop using non-nested names. In fact, it can even help both in terms of performance and in terms of service.

BEM (and other similar naming schemes) solves the problem of maintainability.

And class-oriented styles help in productivity.

---

I also want to add a few more explanations why some of the reasons given in the other answers, or what I saw when they say otherwise, are not entirely applicable to argue with this case.

"This is not how CSS works."

It’s true that CSS has a nested relationship, naturally, as the name suggests, but this alone is not the reason why we should or should use it.

"Nested relationships are easier to maintain."

This is only "possible" depending on the style of the code. Say we have a stylesheet as shown below:

 a { /***/ } .some-div a { /***/ } .more-div a { /***/ } 

And we have a link somewhere in the template:

 <div class="some-div ... <div ... <div class="some-other-div" ... <a href="... 

Now, when we look at the link in the template, we see the a tag without classes. What styles does he have? Well, we have to go to the stylesheet and look for a , and there will be many, many a , and they can be nested arbitrarily deeply.

This is similar to magic numbers in other programming languages; the only difference is that instead of the constant number, we have tag names. A search for a single a is similar to a search 3 in the source code; we need to get most of the information out of context.

And there is no way to do a quick search for the css selector, because we don’t know which parent element of the ancestor tree is used in the stylesheet. It could be .some-div a or .some-div .some-other-div:last-child a .

Instead, if we classified the tag itself (for example, <a class="some-div-link-class some-other-class" ... ). This will be just one search.