j22cal Posted March 10, 2011 Report Share Posted March 10, 2011 I have been trying to come up with a good practice for css specificity. I understand how it works, I just tend to over use specificity and wondered what you do. I will provide some examples of what I am referring to below: Here is one of my more specific examples: #main .content .inner { ... styles ... } #main .content .inner p { ... styles .... } In some of my other styles, I started by being specific and then dropping the specificity by a level for each style. Like: #main .content .inner { ... styles ... } .content .inner p { ... styles .... } .inner p.large { ... styles ... } How specific are you with your styles? Thanks! Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 10, 2011 Report Share Posted March 10, 2011 I use hardly any specificity, just the basic class .inner or id #content, but that's because my sites usually have the same structure and styling on every page. On a really large site where there are different structures or styling to different sections of the site you probably would need to use specificity to identify the page type (or use a different stylesheet for the different page styles). Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 10, 2011 Report Share Posted March 10, 2011 It's basically considered quite inefficient to use elements for styling, using selectors such as: .inner p {} .inner a {} etc. As the browsers work from right to left, so they start by taking all the P tags or A tags then for each one it looks for a parent with class .inner It's considered best practice to put a specific class on those P and A tags (just as an example, it can be div or dd or dt or whatever) and not use any selectors with descendants. Basically if there's no style that are conflicting with your current CSS statement, then you don't really need to be so specific. Instead of #main .content .inner u can just do #main .inner If there's nothing between .content and .inner then you don't need to write .content .inner p you can just do straight away .content p which will be more efficient. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.