CCS efficiency

[hcfrancke]

I have the below CCS lines that are indicated as inefficient when I run PageSpeed in FireFox. I'm a newbie and do not understand exactly how I can change the code to be more efficient. Thank you for helping.div.language { font-size: 11px; text-align: left; padding-top: 10px; height: 14px; width: 150px; text-transform: uppercase; float: left; z-index: 2; }.language a { text-decoration: none; color: #333333; z-index: 2; }.language a:hover { text-decoration: underline; z-index: 2; }ul#langu li a { text-decoration: none; color: #666666; background-color: #ffffff; z-index: 2; } /* drop up */ul#langu, ul#langu ul { list-style: none; z-index: 2; }/* overste menylinje */ul#langu { /*float:left;*/ width: 150px; height: 25px; background: #ffffff; z-index: 2; }/* link */ul#langu li { position: relative; float: left; height: 24px; width: 150px; text-align: left; font-weight : normal; z-index: 2; }#langu li ul { position: absolute; margin-left: -999em; border: none; height: 40px; width: 150px; background: #ff7f00; /*opacity for IE5+*/ filter: alpha(opacity=90); /*opacity for older Mozilla browsers*/ -moz-opacity: 0.90; /*opacity for mozilla/safari*/ opacity: 0.90; z-index: 2; }ul#langu li li{ height: auto; border: none; }ul#langu li li a{ color: #000000; padding: 5px 5px 2px 5px; display: block; z-index: 2; }ul#langu li:hover ul, ul#langu li.over ul { margin-left: 0; }ul#langu li:hover, ul#langu li.over, ul#langu li:hover a { color: #ec6500; } ul#langu li.over a { color: #666666;} ul#langu li:hover li a, ul#langu li.over li a { color: #ffffff; background-color: #ff7f00; padding-bottom: 5px; z-index: 2; }ul#langu li li a:hover { color: #ff7f00; background-color: #ffffff; z-index: 2; }ul#langu li p {padding: 5px;}ul#langu li.last, ul#langu li.last ul{ border: none;width: 100px; z-index: 2; }[/indent][/indent]

[ShadowMage]

It's probably referring to all the duplicated rules. ie,div.language { font-size: 11px; text-align: left; padding-top: 10px; height: 14px; width: 150px; text-transform: uppercase; float: left; z-index: 2; }.language a { text-decoration: none; color: #333333; z-index: 2; }.language a:hover { text-decoration: underline; z-index: 2; }can be re-written asdiv.language, .language a { z-index: 2; }div.language { font-size: 11px; text-align: left; padding-top: 10px; height: 14px; width: 150px; text-transform: uppercase; float: left; }.language a { text-decoration: none; color: #333333; }.language a:hover { text-decoration: underline; }When multiple elements have common styles you can use the comma to separate the selectors and put all the common styles in one declaration and put the specific styles under each specific selector.It's CSS, btw, not CCS.

[jeffman]

Another possible reason is writing ul#langu . Since # identifies a unique element by its ID, telling CSS to look for a <ul> with that ID is also redundant. Writing #langu would get you the same results.I am guilty of writing CSS that way sometimes. If the CSS is long, I might need to look at a selector and be reminded what kind of element it refers to.

[hcfrancke]

Another possible reason is writing ul#langu . Since # identifies a unique element by its ID, telling CSS to look for a <ul> with that ID is also redundant. Writing #langu would get you the same results.I am guilty of writing CSS that way sometimes. If the CSS is long, I might need to look at a selector and be reminded what kind of element it refers to.

This is the message I get:Very inefficient rules (good to fix on any page): * #langu li.over ul Tag key with 2 descendant selectors and Class overly qualified with tag * ul#langu li:hover a Tag key with 2 descendant selectors and ID overly qualified with tag * #langu li.over a Tag key with 2 descendant selectors and Class overly qualified with tag * #langu li.over li a Tag key with 3 descendant selectors and Class overly qualified with tag * #langu li.last ul Tag key with 2 descendant selectors and Class overly qualified with tag * ul#nav li a Tag key with 2 descendant selectors and ID overly qualified with tag * ul#nav li li Tag key with 2 descendant selectors and ID overly qualified with tag * ul#nav li li a Tag key with 3 descendant selectors and ID overly qualified with tag * ul#nav li:hover ul Tag key with 2 descendant selectors and ID overly qualified with tag * ul#nav li.over ul Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag * ul#nav li:hover a Tag key with 2 descendant selectors and ID overly qualified with tag * ul#nav li.over a Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag * ul#nav li:hover li a Tag key with 3 descendant selectors and ID overly qualified with tag * ul#nav li.over li a Tag key with 3 descendant selectors and ID overly qualified with tag and Class overly qualified with tag * ul#nav li li a:hover Tag key with 3 descendant selectors and ID overly qualified with tag * ul#nav li p Tag key with 2 descendant selectors and ID overly qualified with tag * ul#nav li.last ul Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag * ul#sitemap li a Tag key with 2 descendant selectors and ID overly qualified with tag * ul#sitemap li a:hover Tag key with 2 descendant selectors and ID overly qualified with tag * ul#sitemap li:hover a Tag key with 2 descendant selectors and ID overly qualified with tag * ul#sitemap li.over a Tag key with 2 descendant selectors and ID overly qualified with tag and Class overly qualified with tag

[jeffman]

"overly qualified" describes the kind of thing I was referring to, and the messages referring to an ID seem to be exactly the thing I was referring to.

#langu li.over a Tag key with 2 descendant selectors and Class overly qualified with tag

This may or may not be wrong, depending on your HTML structure.1. if the .over class is only ever applied to an <li> element, then li.over is over qualified. Simply writing .over will be enough. If .over ever applies to any other kind of element, then li.over is required.2. if li.over elements are only ever nested in #langu, then #langu is not needed in the selector chain. If li.over elements are sometimes nested in elements that are not #langu, then #langu is required.-----Keep in mind that this sort of efficiency checking is really only necessary when your CSS starts getting long, like more than 2-3K. Anything smaller than that should not have a noticeable effect on download time.Where I wish more designers would pay attention is image compression. There are way too many big freaking images out there (like 100K) that could be compressed to half their size or less with no noticeable loss of quality.

[hcfrancke]

"overly qualified" describes the kind of thing I was referring to, and the messages referring to an ID seem to be exactly the thing I was referring to.This may or may not be wrong, depending on your HTML structure.1. if the .over class is only ever applied to an <li> element, then li.over is over qualified. Simply writing .over will be enough. If .over ever applies to any other kind of element, then li.over is required.2. if li.over elements are only ever nested in #langu, then #langu is not needed in the selector chain. If li.over elements are sometimes nested in elements that are not #langu, then #langu is required.-----Keep in mind that this sort of efficiency checking is really only necessary when your CSS starts getting long, like more than 2-3K. Anything smaller than that should not have a noticeable effect on download time.Where I wish more designers would pay attention is image compression. There are way too many big freaking images out there (like 100K) that could be compressed to half their size or less with no noticeable loss of quality.

Thanks a lot for the help and explanation