Using CSS specify to clean up your HTML or CSS code-base

I would normally structure my site as follows:

html > body > div#header //Or just header if using html5

html > body > div#main //Or section#main if using html5

html > body > div#footer //Or footer if using html5

Using an ID for the main container will give alot of benefits. But if you structure your css the way I do (compact), then you’re going to end up with problems with CSS specify. Specify is considered advanced css on most website tutorials (I have no idea why, since almost everyone will run into this problem as their css code-base grows).

Basically, what specify is, it gives a rank on the css rules when there is a conflict. A weight is attached to how you structure the selectors. Have a read here.

Using the structure above, this is how I setup my CSS:

[codesyntax lang=”css”]

#main a
{
	color: #000;
}

/*now lets say I want to single out some other headers in some other div (located inside #main)*/
.someReallyCoolDivs a
{
	color: #fff;
}
/*OR even if you have this, it doesn't work*/
a.theReallyCoolAnchor
{
	color: #fff;
}

[/codesyntax]

Because #main a has a higher weight than the other 2, the anchor will always be of color: #000;. I kept running into this problem constantly for the past few years. So to go around this, I always ended up using !important. I hated using !important so I just found out about specify.

I found 2 solutions to getting rid of !important and also reducing css size by a small amount.

  1. Use the ID of the main, or any other ID lower in your html hierarchy. eg.[codesyntax lang="css"]
    #main .someReallyCoolDivs a
    {
    	color: #fff;
    }
    [/codesyntax]
  2. Attach a class to #main.[codesyntax lang="css"]
    .main .someReallyCoolDivs a
    {
    	color: #fff;
    }
    [/codesyntax]

I have no idea to conclude this post, so…kthxbai?