How You Can Handle the Issues Associated With CSS Specificity

Blog No Comments

Web developers have to do a lot of coding work while creating websites or its pages. It doesn’t matter whether you are creating a small or large website, you can’t neglect the huge importance of fair coding practice. Coding a website or its pages is a very difficult task. Even a single mistake can ruin the overall effectiveness, productivity, and performance of the end product. Apart from this, a number of coding issues flourish when working with CSS (Cascading Style Sheets).

When you have lots of website design, development, customization, and maintenance projects, you want to complete the website building tasks easily without compromising the quality of the end product. For that, you need to understand the CSS Specialty and its working pattern. So, let’s understand what is CSS specialty and how one can easily handle issues related to it.

 

What exactly are CSS Specificity and its issues?

In simple words, CSS specialty is a modus operandi which determines CSS rules that are required to be applied by browsers. Because of it, CSS rules can’t be applied to specific elements. It also determines which rule have superiority over other CSS rules. Just have a look at common CSS specialty examples and their values:

CSS Specialty ExamplesValue
* { }0
li { }1 (one element)
li:first-line { }2 (one element, one pseudo-element)
ul li { }2 (two elements)
ul ol+li { }3 (three elements)
h1 + *[rel=up] { }11 (one attribute, one element)
ul ol li.red { }13 (one class, three elements)
li.red.level { }21 (two classes, one element)
Style=””1000 (one inline styling)
p { }1 (one HTML selector)
div p { }2 (two HTML selectors)
.sith10 (one class selector)
div p.sith { }12 (two HTML selectors and a class selector)
#sith100 (one id selector)
body #darkside .sith p { }112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

 

One of the easiest methods to deal with the CSS specialty issue is to use the BEM(Block Element Modifier method). It is a toolkit which helps you to organize the structure of CSS and understand it easily. However, this is not a great tool for web developers who develop CMSs. So, you can use CSS Preprocessors (such as SASS) in place of BEM.

 

Tips to deal with Issues Associated With CSS Specificity

 

1. Subjoin The Existing Selector 

When you encounter a CSS specialty problem and have no option, but to choose a selector compared to another, then you should adjoin the existing selector with a new class, id, type selectors, and so on. Based on your specific needs, you can conjoin the reference selector and use it in your CSS or make use of the CSS to complete it by using the below-mentioned code snippet:

It will give the following result:

There are many web developers who want to use an HTML or body tag to prepend the selector. You can use some specific things available on your pages for that work, such as #wrapper, .page, etc. Furthermore, make the selector ready for any change you would like to make in the future. For that, you should use Sass which assists a lot in prepending selector in variable forms as detailed below:

This code will bring about the following results:

2. Make Use Of A Self-Chained Selector

Prepending a selector is an easy way to deal with the issues associated with CSS specialty, but it doesn’t work well in all circumstances. You can use CSS’s feature to tackle the problem because it increases the specificity by using self-chained selectors because they work well with ids, classes, etc. When you use classes for styling your CSS, the use of a self-chained selector allows you to override any specific selector. You can do this by using the following code:

 

If you don’t want to use this code, you can easily make a mixin to enhance the CSS specialty with Sass 3.4.

 

It will bring the following results:

Alternatively, LESS and Stylus CSS Pre Processors can also be used for self-chaining.

Important Points To Remember:

  1. Don’t use IDs for layout and CSS. Always keep in mind that using an ID works well only when you need to place an anchor on the page to communicate with elements using JavaScript.
  2. Separate your CSS logic into definitions for HTML element tags and try to keep all H3 elements bold and all P elements at a 1em margin.

Concluding Remarks

All web developers need to implement clean coding to create appealing, professional, and functional websites. By following the above-mentioned tips, they can easily take care of issues associated with CSS specialty.

Author Bio:

This article is drafted by Brandon Graves, a WordPress developer with a great expertise in convert website to WordPress, Plugin development etc. Follow him on Google Plus to get instant updates from him.

Image Credit: Websolutionsdone

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.
PremiumCoding
Written by PremiumCoding
We develop beautiful Wordpress themes with minimal and clean design.