6

I have been told on several occasions not to select elements such as <nav> & <body> and to instead use the class selectors. For example, "the <nav> tag is not for display/styling purposes but it is to make the navigation section explicitly separate." But doesn't this defeat part of the the purpose of having semantic elements?

Assuming I have only one navigation list of bullets and I am making them horizontal, adding background, etc., is it still ok to select the nav element over the class?

    <nav class="navigation">
        <ul class="links">
            <li><a href="">Shop</a></li>
            <li><a href="">Discounts</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Blog</a></li>
        </ul>
    </nav>

And, if you're going to down vote me, please provide an explanation instead of just assuming I can intuit why you did it.

Padawan
  • 724
  • 1
  • 8
  • 20
  • Related: [CSS Performance revisited](http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/). Having said that, I honestly think this question should be closed as it basically encourages subjectivity. ) – raina77ow Nov 29 '14 at 19:14
  • No, this is a good question. It follows the rules in the help center. – Ian Hazzard Nov 29 '14 at 19:14
  • Can not the "subjectivity" be qualified by simply covering different scenarios, thereby making it more objective? For example, "yes, it's ok to select – Padawan Nov 29 '14 at 19:20
  • Alohci, very little can be considered to be truly not subjective. Even a doctor's objective opinion is subjective, hence the phrase, "get a second opinion," with emphasis on the keyword, "opinion." An example is the use of ID or Class. http://stackoverflow.com/questions/544010/css-div-id-vs-div-class Just because they both conform to CSS specs does not mean that there one is not better than the other, which many opinions believe. I believe many of the rule Nazis are missing the point of questions that are asked in order to adhere to some protocol that, in the end, hinders more than helps. – Padawan Nov 29 '14 at 22:54

2 Answers2

7

Adding a class makes it easier to extend the page later. The class should carry semantic meaning in itself.

If you only select elements and then add more elements of the same type later, you'll have to add classes anyway.

Jakub Arnold
  • 85,596
  • 89
  • 230
  • 327
  • Thanks Jakub, it sounds like you're saying that it's ok then to select the semantic elements, however issues arise when you add duplicate elements which is why the class selector is preferable since it zeroes in on the exact element you want where the semantic element would then be too broad. Is that correct? – Padawan Nov 29 '14 at 19:17
  • @Padawan Yes, but keep in mind that you can reuse a class. It's not just for a single element, but it is for a certain type of elements. For example you might have a class for a primary button, which could be present on 50 different pages, and sometimes even more than once on a page, but it would still be quite specific, since the class is saying that the button is primary. – Jakub Arnold Nov 29 '14 at 19:22
  • K, thanks, this helps. ...and I have no idea how to make the question less subjective, if you have any pointers, please advise. – Padawan Nov 29 '14 at 19:25
1

Classes have greater specificity than element selector. So it's up to you when to use it.

Suppose of this html:

<nav class="nav"></nav>
<ul class="nav"></ul>
<nav class="footer-nav"></nav>

Now, how do you use the css styling for <nav class="nav"></nav> ?

.nav{...} ? No, there are two classes with nav.

Next: nav{} ? No, there are two nav elements.

So, how do you maintain?

Like this: nav.nav{} Now it selects the particular element we wanted.

So, it's all about the elements to what we want to select.

So it's totally upto the elements you have in your page.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231