When using modernizr, is it a bad pracice to mix techniques, ie for or against particular capabilities?

Question

I am trying out modernizr. Is it OK to mix the 'for / against various capabilities' in the same stylesheet, and if so are there any general rules as to how to mix them?

eg Would this be OK or bad practice. I just wonder if mixing conventions could make for confusion and if it would be better to generally stick to one convention, using exceptions only if necessary; or whether it's important to program in such a way as to avoid all exceptions.

    .no-borderradius .some-element {
    ...
    }

    .boxshadow .some-other-element {        
    ...
    }

Answer 1

It really depends on the situation, i.e. if you have style dependencies.

For example, you want some padding on #box if the border-radius is applied, and you don't want any if the browser doesn't support it. In that case, you can do:

.border-radius #box {
  border-radius: 5px;
  padding: 5px;
}

(Ignore the lack of vendor prefixes.)

But if you, for example, have subtle a gradient which just enhances the looks and nothing depends on it, you can just do:

#box {
  background: white linear-gradient(...);
}

Browsers who support it will show it, browsers who don't will just display the degraded white look.

Another example, you want a different border color depending on if the box-shadow was successfully applied. You can setup a box-shadowless style and override it if box-shadow is supported:

#box {
  border-color: gray;
}
.box-shadow #box {
  box-shadow: black 0 0 5px;
  border-color: white;
}

You can do it the other way around, but in my opinion, it makes more sense to give the degraded style first, then enhance it. You see that in this example there was no need to use .no-box-shadow because I'm overriding border-color anyways. Also, if you find the box-shadow with the gray border visually acceptable, you can put the box-shadow style under #box (instead of .box-shadow #box).

To conclued, there's no need to clutter the code with classes just to be "consistent", you just have to think about the semantics of your styles. Also, if your styles depend too much on classes generated by JavaScript, imagine what your page would look like with JavaScript turned off.