CSS Adjoining Classes

user_10343321 0
Viewed 8229

So I'm fairly new to coding and I set a task for myself, that being to recreate my WordPress site from the ground up using HTML, CSS and javaScript, now as I have looked for resources online for the best method ongoing about making a responsive navigation bar, of course, I came across an example on W3Schools.

Now the question I have is what is the best way to go about Adjoining Classes, my CSSLint picks it up as bad practice(At least that's what I'm taking away from it) so I'm met with a conundrum whether to stick with them and just make it incompatible for IE 6 (I believe) or to just learn the use the better standard.

@media screen and (max-width: 600px) {
  .cMainNav.responsive {
    position: relative;
  }

  .cMainNav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .cMainNav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
css
1 Answers

I think you're misunderstanding. Adjoined classes are not a standard. This is just one of the many parts of css specificity.

If you have an element with two classes:

<div class="square red"></div>
<div class="square green"></div>

You can target their combination like so:

.square.red {}

CSSLint may be warning you that making really long, complex selectors like this is less than ideal. You never want to end up with something like this:

.square.red.fixed.flex.button{}

If you need really specific targeting, you're better off assigning an id or a specific class altogether.

<div id="loginModal"></div>

In general, all of these are just tools at your disposal. Read more about specificity and keep in mind that there's really no "wrong" option here, but any of these options can be abused.

user_2333370
Related