Handling CSS Selector Specificity with Preprocessors

Coding is regarded as an imperative aspect of web design and development process. Whether you’re handling a small-sized, medium-sized or a large-sized project, coding is something you can’t do away with. Well, a lot of issues tend to crop in during the coding process and the same need to be addressed using a careful approach. CSS Specificity is one such issue that’s been haunting developers working on medium and large-sized web development projects. It is quite critical for you to keep the CSS specificity as low as possible. Keen on reading this post as I’ll be elaborating on handling the selector specificity issue using CSS preprocessors.

CSS Specificity- A quick overview

The term ‘Specificity’ in CSS Specificity determines as to which CSS rule is applied by the web browsers. Selector Specificity is basically a process which determines the rules that take precedence in CSS when multiple rules are being applied to a similar element available in the markup. It is interesting to note that all rules within the CSS carry a specificity rating regardless of the chosen selector type. Also, in case two selectors are applied to the same element, the one with a higher specificity will emerge as the winner.

In case you need to override a selector with a specific one, you can do the same using the approaches explained in this article .

Approach No.1

Prepend using a selector

Each time you encounter a specificity problem and are inclined on making a specific selector heavier than the other, you can simply prepend the existing selector with a new class, id, attribute or a unique type selector. Specially targeting IE with a conditional html tag, the process of prepending with a selector has a lot in store for the coding professionals.

You can use the parent reference selector (&) available in CSS for prepending an existing selector for making it heavier. Here’s how you do it:

.red{
  .btn & {
    color: red;
  }
}

Hence, the resultant CSS will be similar to the one displayed below:

.btn .red {
  color: red;
}

Although you might be interested in prepending the selector using html or body tag, it is recommended to use something more specific that’s available on your pages including .page, header &, footer & etc.

You can use Sass for putting the prepending selector into a variable-making the selector ready for any future changes. Have a look at this:

$varPrepend1: "header &";
$varPrepend2: "footer &";

.block {
  #{$varPrepend1} {
    width: 50%;
  }
  #{$varPrepend1} {
    width: 33%;
  }
}

The end result would be like this:

header .block {
  width: 50%;
}
footer .block {
  width: 33%;
}

Output:

Therefore, prepending the initial class selector 0,1,0 with type selector will lead to end result 0,1,1, which further prepends with an id -1,1,0.

Approach No.2

Using CSS’s feature wherein a selector is self-chained to increase its specificity

Many of you reading this post might be unfamiliar with the fact that prepending more than one selector with the heaviest one available in your code, you are in a way limiting your options for resolving a selector specificity issue that might crop in at a later point of time. It is here that the CSS selector self-chaining feature has a unique role to play. All the self-chained selectors work well with classes, ids, attribute selectors; with the only exception of type selectors. It is interesting to know that if you’re using classes for styling your content, then self-chaining renders you a highly scalable way of overriding a particular selector.

The parent reference selector allows you to chain the same selector to itself for more than once, with the same applicable to classes, ids, attribute selectors excluding type selectors. Hence, you’ll be required to interpolate ever & positioned after the first though with the minimum requirement being Sass 3.4.

The code snippets associated with the same are displayed below:

.classSelector {
  &#{&} {
    width: 50%;
  }
  &#{&}#{&} {
    width: 33%;
  }
}

And,

.classSelector.classSelector {
  width: 50%;
}
.classSelector.classSelector.classSelector {
  width: 50%;
}

However, if you aren’t comfortable with using the above code snippets, you can create a mixin, which can iteratively increase the specificity of a single CSS selector. This mixin would use advanced features along with Sass 3.4 as shown below:

@mixin blockDefine($val: 1) {
  $block: &;
  @if $val > 1 {
    @for $i from 1 to $val {
      $block: $block + &;
    }
    @at-root #{$block} {
      @content;
    }
  }
  @else {
    @content;
  }
}
.block {
  @include blockDefine(2) {
    width: 50%;
  }
  @include blockDefine(3) {
    width: 33%;
  }
}

The resulting CSS would be similar to this one:

.block.block {
  width: 50%;
}
.block.block.block {
  width: 33%;
}

While you can conveniently create an identical mixin in Stylus, there are no easy ways of creating the same in LESS. To sum it up, CSS self-chaining will work as the right technique for increasing the specificity of a specific selector from 0,1,0 to 0,2,0 to 0,3,0 and so on.

Wrapping Up

With CSS Preprocessors evolving at a rapid pace, it has become essential to pay special attention to using the same in the right way. You need to thoroughly understand the sophisticated logic behind the CSS preprocessors- leaving no area un-attented.

Author Bio: Victoria Brinsley is a veteran Android developer with Appsted Ltd – a reputed Android app development company. She can also assist you to explore more about this development platform and related technology.