|
|
| Line 26: |
Line 26: |
| == Avoid Inline Styles == | | == Avoid Inline Styles == |
| Inline styles should ''never'' be used (e.g. <code>style="..."</code>). Instead, use an external stylesheet. | | Inline styles should ''never'' be used (e.g. <code>style="..."</code>). Instead, use an external stylesheet. |
| | |
|
| |
|
|
| |
|
| == Efficiency == | | == Efficiency == |
| Writing efficient CSS is key to enhanced user experience. Check out [http://css-tricks.com/efficiently-rendering-css/ this article] for some good information on efficient CSS (we've liberally extracted contents from this article). | | Writing efficient CSS is key to enhanced user experience. Check out [http://css-tricks.com/efficiently-rendering-css/ this article] for some good information on efficient CSS (we've liberally extracted contents from this article). |
| | |
|
| |
|
|
| |
|
| === Right to Left === | | === Right to Left === |
| There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are. | | There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are. |
| | |
|
| |
|
| <pre> | | <pre> |
| Line 46: |
Line 49: |
| </pre> | | </pre> |
| When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient: | | When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient: |
| | |
|
| |
|
| <pre> | | <pre> |
| Line 53: |
Line 57: |
| === Don't tag-qualify === | | === Don't tag-qualify === |
| Don't do this: | | Don't do this: |
| | |
|
| |
|
| <pre> | | <pre> |
| Line 58: |
Line 63: |
| </pre> | | </pre> |
| ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient. | | ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient. |
| | |
| Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t | | Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t |
| | |
|
| |
|
| [[Category:Coding Standards]] | | [[Category:Coding Standards]] |
Revision as of 06:32, 23 May 2011
Avoid Inline Styles
Inline styles should never be used (e.g. style="..."). Instead, use an external stylesheet.
Efficiency
Writing efficient CSS is key to enhanced user experience. Check out this article for some good information on efficient CSS (we've liberally extracted contents from this article).
Right to Left
There are four kinds of key selectors: ID, class, tag, and universal. It is that same order in how efficient they are.
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */
When we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:
#main-nav > li { } /* Slower than it might seem */
Don't tag-qualify
Don't do this:
ul#main-navigation { }
ID’s are unique, so they don’t need a tag name to go along with it. Doing so makes the selector less efficient.
Don’t do it with class names either, if you can avoid it. Classes aren’t unique, so theoretically you could have a class name do something that could be useful on multiple different elements. And if you wanted to have that styling be different depending on the element, you might need to tag-qualify (e.g. li.first), but that’s pretty rare, so in general, don’t