|
|
| (One intermediate revision by one other user not shown) |
| Line 1: |
Line 1: |
| | {{Obsolete}} |
| <center> | | <center> |
| <table border="1"> | | <table border="1"> |
| Line 26: |
Line 27: |
| == 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 50: |
| </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 58: |
| === Don't tag-qualify === | | === Don't tag-qualify === |
| Don't do this: | | Don't do this: |
| | |
|
| |
|
| <pre> | | <pre> |
| Line 58: |
Line 64: |
| </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]] |
Latest revision as of 00:42, 21 April 2024
|
You must unlearn what you have learned. This article contains obsolete data. It reflects a Dark Brotherhood policy, position, or object that has been removed or replaced. It is preserved here for historical purposes only and should not be used/referenced.
|
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