5

If I have a container and a list of item, I might have the following HTML markup:

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

And I can style them two ways (assuming using plain CSS and not less/sass or any other helpers). First, like one normally would do:

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

Or, I can simply reference everything by a verbose, descriptive class name:

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

No more cascading relationships! Is there a reason not to do this for everything (such that every element is referenced by a single class/id name)? I (and people working on the same codebase) simply do not find either to be that much better in readability; if anything, we find unique and direct names easier to grasp and also easier to search for.

There was an ancient article that generally recommended shorter, more unique selectors, for performance; in its more recent update, it's said that overall the performance has changed for the better. But how much better? Is the shorter way still faster?

Improve this question
5
  • To me, and this is just my opinion which is why I'm not posting it as an answer, the first example (i.e. .food .list) is more flexible and my personal preference. This is the reason for the "C" in CSS. You want your styles to cascade, as it makes it easier to apply broad global styles without having to rewrite the same properties for similar classes multiple times. You could do .classone, .classtwo but why? If they're that similar and contain the same styles, it's just duplicate styling. Commented Jun 1, 2015 at 20:46
  • To reduce complexity, I consider it in the manner of "which states represent what". If you have an int with 5 states but MAX_INT possible memory states, it should probably be an enum. Similarly, in your second example, what does class="container foodcontainer" (no food) mean? The CSS will screw up massively, but it's only working with the completely valid HTML classes it was given. Commented Jun 1, 2015 at 20:49
  • @AlexanderChen ...what? That didn't even seem to be a reply to my comment. I'm not talking about "active" states, and I don't see how "default states" are relevant to the question. Commented Jun 1, 2015 at 21:06
  • @Katana314 I will need some clarification. What second example were you referring to, and how will the CSS screw up? Having states doesn't negate the original question and you still need something to represent the state. Commented Jun 1, 2015 at 21:13
  • I don't think this is opinion-based at all. It is a perfectly valid question about how to think about and structure CSS classes, and provides great material for some excellent suggestions about how to do so. Commented Jul 8, 2015 at 5:08

4 Answers 4

Reset to default
1

.food .list { /* style */ } targets only elements with list class that are within an element with a class food.

.food > .list { /* style */ } targets only elments with list class that are direct children of elements with a class food.

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

Generally, if you want to make sure you're only targeting an element within a specific element and not any other elements that might have the same class, use the first or the second of the above, depending on your needs.

Of course, you could also give unique classes to them to avoid chaining them, but IMO there's just an unnecessary hassle of remembering which classes you've already in use. Also, I think it helps with readability, when you chain them instead of coming up with unique classes - then it's easier to see within which elements these rules apply.

I wouldn't worry too much about the performance with either of those - unless you have massive sites.

You can read about the CSS selectors here.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I know how these selectors are different, and can/should be applied in different situations. What I'm more interested to know is whether there is any reason not to add a unique class name in the markup so we can always reference the element in the third way.
@AlexanderChen Yeah sorry about that, realized that only after I had already answered. Made some edits. I'd it's mostly a matter of preference.
@AlexanderChen Sounds like in that case that you should use ids instead. ids are meant to be unique and used only once on any given page whereas classes are meant to group elements with "like styles". Generally speaking id != class in terms of use cases. No need to recreate this functionality with classes. From a curiousity sake, what does having a class on every element by you in terms of development?
@Oksanen No worries. Though I don't think coming up with unique names are any more difficult than figuring out what CSS selector you would otherwise want: if .class1 tag .class2 is need, you can just name the new class .class1tagclass2. Readability-wise it seems to be the same for me. And the latter is also easier to search in a file, because you don't get .class2's that are not inside .class1 tag.
@War10ck by unique class names I only meant to say unique to the same type of elements. Id's cannot be used for a list of items for instance. As for the gains, I find it easier not having to remember to override rules applied with common ancestry; it's like a normalize reset for every element.
1

Well you could give a class to every element, but the point of the cascading relationships are to prevent having to give a class to every element.

For example:

a{ /* style link elements some way */ }

.some-div a { /* but in some-div they should look differently }

In this case you only have to set 1 class on the div. Else you would have had to give every link element a class in your html, which is kind of counterproductive.

Using relations you can be a lot more generic and avoid getting to the point where you end up with names like header-logo-nav-link-first. You would have to remember that class, but you would also have to write it in every element. Ever seen a footer with 50+ links? ;)

Also the more specific you are with your selectors the more priority your styling gets.

Improve this answer

5 Comments

But why do you want to prevent having to give a class to every element?
There is nothing stopping you from doing so. If you want to, you can. It's just going to take you a lot more time. And generally, time is very expensive ;)
True. But if generated programmatically it makes only a very small difference.
@Alexander Chen: It'd make a very small difference to authoring time for sure, but those class names could easily add up to a sizeable chunk of the HTML file size. Mathieu asks, "Ever seen a footer with 50+ links?" - well, Stack Overflow's own footer tallies a whopping 68 matches for #footer a, of which 54 of them are site links. If each one of them had a class="footer-site-link", assuming the elements didn't already have a class attribute (they don't), that's more than a kilobyte of overhead, just for the footer (and that's not even all of it!).
@BoltClock Very true. But when a typical web page is considered, it's probably gzipped and a large portion of the loading time will be spent on the roundtrip rather than transfer; these make the difference in file size not as important. On the other hand, there's also more and more client-side rendered pages making bandwidth and file size even less of a concern. Not saying this isn't a factor, but when there's images, javascript, multi-media on the page, I think the file size difference in HTML itself would have minimal impact.
1

Very interesting question. Essentially, you have identified two dimensions to your class architecture. The first is the food dimension, which has a semantic meaning, and is particular to all things related to food. The second is the list dimension, which is a layout dimension, and is particular to all things related to lists and their layout.

This is a very clever way of breaking down classes. It helps prevent rules having to do with food from "leaking" into rules having to do with lists and vice versa. Your HTML becomes a clean orthogonal combination of classes from groups of classes with different meanings. In my mind, this is ideal. It follows a particular CSS design philosophy of combining smaller classes in different ways, which promotes re-use and improves readability. The alternative is "kitchen-sink" classes which are harder to re-use and harder to read. This will tempt you to use pre-processors with features like @extend, and things will go downhill quickly from there.

The technical term for defining singleton classes is "hyper-targeted". An 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-looking class names. Every single change will require changes to both CSS and HTML. Proponents of this approach claim efficiency as one reason to adopt it, and this might have been an issue five years ago, but as you mentioned, today's browsers handle reasonable amounts of nested selectors without breaking a sweat.

Improve this answer

Comments

1

I'm revisiting this question as I found newer and more recent articles and references.

In short, there should be little reason stopping one from using non-nested names. In fact, it might even help with both performance and maintainability.

BEM (and other similar naming schemes) tackles the maintainability issue.

And, class-centric styles help with performance.

I also want to add a few more explanations to why some of the reasons given in the other answers, or what I've seen being said else where, doesn't quite apply to argue against the case.

"This is not how CSS works."

It is true that CSS has nested relationship available, naturally as its name suggests, but that itself doesn't become the reason why we must or should use it.

"Nested relationship is easier to maintain."

This is only a "maybe" depending on the code style. Say, we have a style sheet like 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 a tag a with no classes. What styles does it have? Well, we have to go to the style sheet and search for a, and there will be many, many a's, and they can be nested arbitrarily deep.

This is just like "magic numbers" in other programming languages; the only difference is that instead of a number constant we have tag names. Searching for a single a is like searching for 3 in source code; we have to infer most information from the context.

And there is no way to do a quick search for the css selector because we don't know which parent in the ancestry tree is used in the style sheet. It could have been .some-div a or .some-div .some-other-div:last-child a.

Instead, if we classed the tag itself (e.g. <a class="some-div-link-class some-other-class" ...). It will just be a single search away.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.