April 1, 2012

Which should I use? (performance)

Question by Yim

I want to know a simple thing:

when setting up a style that is inherited by all its children, is it recommended to be most specific?

Structure: html > body > parent_content > wrapper > p

I want to apply a style to p but respecting these:

  • I don’t care having parent_content or wrapper having the style
  • I do care changing the html or body style (or all p)

So what should I use?

#parent_content{
    color:#555;
}

#parent_content p{
    color:#555;
}

#wrapper{
    color:#555;
}

#wrapper p{
    color:#555;
}

/*...etc...*/

Also, some links to tutorials about this would be great

Answer by Starx

In the matter of specificity, give an id to the p and use

#paragraphid {}

But the answer depends what actually are your need. I will break down your code

#parent_content{
    color:#555;
}

Will apply the color the text inside and may be inside its children also

#parent_content p{
    color:#555;
}

Will apply the color to all the p inside #parent_content and its children

#wrapper{
    color:#555;
}

Will apply the color to all the text inside it, and of its children

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!