CSS Specificity Hacks

Posted on - Last Modified on

Experienced Cascading Style Sheet (CSS) developers know that specificity is a fast track for getting into a load of trouble when attempting to scale a CSS app.  Even if your source code is flawless, and  your rule sets cascade and are designed to inherit from each other flawlessly, a selector that is overly specific can throw a monkey wrench in the entire app.  CSS is entirely dependent on the order of the source code, and specificity is something that cannot be avoided.  In fact, the way to best deal with it is by being even more specific.  Here are the hacks that can help you avoid problems.


·         In CSS, never, EVER use IDs


There is one very important thing all CSS developers should know.  There is nothing you can do with an ID that you cannot do better with classes.  They cannot be reused, and their specificity is just simply too high. 


·         Never use nest selectors when they are not needed


Do not use a nest selector unless you have a very good reason to do so.  If .nav{} will work just as well, never use u1.nav {} as this will only serve to decrease the number of places you may use the new .nav class.


·         Use classes liberally


Classes have a low specificity, can be reused easily, and are also portable.  This makes them the ideal selector.  By keeping the specificity on selectors as low as possible, you can make the specificity higher while at the same time still be able to reuse that element when there is a need to override the style of an element.


Don't Fall In Love With the !important Declaration


The !important declaration is powerful, as it can be used to increase the specificity value of a class.    Developers must be on guard so as not to misuse it.  It is always a best practice to keep CSS code as clean as possible, and the !important declaration can accomplish this in places where elements within a class selector have the same style.


The !important declaration should never be used as a quick fix to override the style of an element, rather than doing the hard work of figuring out the structure of the CSS code and how it works. 


Here is a good example of the use of the !important declaration:


.last   {


margin-right: !important;



This is a good way to handle a number of floated blocks – specifically, for the last block on the right in a given row.  This makes certain that the last block does not have any right margin keeping it from aligning nicely with the right edge of its parents.  Each of the preceding blocks could have more specific CSS selectors that address the right margin.  But with the !important declaration, one simple and clean class will take care of all of that.


Specificity in CSS can be a problem, so be sure and take heed of these suggestions to avoid getting in trouble.

Posted 22 April, 2015


Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical documents, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, or articles? Do you want to make sure that your marketing material content is flawless and appealing to readers? I can do any of that! I am a professional editor (academic, copy, line/su...

Next Article

Cool Functions Most People Don't Know About PHP