CSS: Does It Render "Ul > Li" Faster Than "Ul Li"

Which render fastest Div, ul-li or table to show very very long list

I would chose ul/li. It is easily edited through css and it will take little effort to populate a list.

Anything with text will optimize your search engine, so any of your three would be fine.

Here is a topic discussing tables and SEO:
https://webmasters.stackexchange.com/questions/6890/are-html-tables-bad-for-seo

DIV vs UL,LI performance

They're just tags. There's zero difference whatsoever between them DOM-wise; the only difference is in the rendering (CSS, which you can customize either way) and the meaning (semantics).

If you have a list of things, use a <ul>.

CSS selectors ul li a {...} vs ul li a {...}

">" is the child selector

"" is the descendant selector

The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum.

A child element is simply one that is directly contained within the parent element:

<foo> <!-- parent -->
  <bar> <!-- child of foo, descendant of foo -->
    <baz> <!-- descendant of foo -->
    </baz>
  </bar>
</foo>

for this example, foo * would match <bar> and <baz>, whereas foo > * would only match <bar>.

As for your second question:

Which one is more efficient and why?

I'm not actually going to answer this question as it's completely irrelevant to development. CSS rendering engines are so fast that there is almost never* a reason to optimize CSS selectors beyond making them as short as possible.

Instead of worrying about micro-optimizations, focus on writing selectors that make sense for the case at hand. I often use > selectors when styling nested lists, because it's important to distinguish which level of the list is being styled.

_{* if it genuinely is an issue in rendering the page, you've probably got too many elements on the page, or too much CSS. Then you'll have to run some tests to see what the actual issue is.}

Is CSS faster when you are specific?

In real world the speed difference would be negligible.

To be technical .container would be faster as it has fewer selectors to process.

Selectors have an inherent efficiency. The order of more to less efficient CSS selectors goes thus:

1. ID, e.g. #header
2. Class, e.g. .promo
3. Type, e.g. div
4. Adjacent sibling, e.g. h2 + p
5. Child, e.g. li > ul
6. Descendant, *e.g. ul a*
7. Universal, i.e. *
8. Attribute, e.g. [type="text"]
9. Pseudo-classes/-elements, e.g. a:hover

In regards to your second question:

Is there a way to measure performance in CSS ?

Steve Souders put out an online test to measure performance of CSS that can still be accessed here.

There are better ways to measure performance nowadays, but this is a quick and easy resource you can play with.

Performance wise, does things like this even matter or does it all depend on text weight basically ?

The short answer is "not really".

The long answer is, "it depends". If you are working on a simple site there is really no point to make a fuss about CSS performance other than general knowledge you may gain from best practices.

If you are creating a site with tens of thousands of DOM elements then yes, it will matter.

Why webmasters use `ul/li` instead of `div`s for layout?

As far as I know ul / li is are typography specific tags, intended to format text as a list (while search engines love semantic tags).

They are not. They are semantic elements that say the content is a set of list items where the order is not of particular importance.

My big question here is why Web Masters prefer to use lists solution (ul/li) where is an obvious case of a layout (div) solution

Divs are not related to layout. Layout is the job of CSS. The elements used should be selected based on the semantics they convey, then CSS should be applied to them to give the desired rendering.

A div element is an element of last resort. It has no semantics and should be used when HTML doesn't have an element with appropriate semantics for the content.

Why should I use 'li' instead of 'div'?

For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better.

Why should I use UL/LI in my HTML?

It is more semantically correct.

What you have above is an unordered list of languages. You should be using an unordered list of items (UL element with LI elements) to be semantically correct about it.

This also helps screen readers and other technologies that depend on correct semantics to work.

---

Related Topics