If you have an HTML page with a class in an element, for instance <div class="myClass"> would it be best to refer to it in the CSS as .myClass or div.myClass?
Thanks in advance!
views:
97answers:
4
+4
A:
Unless you're going to give something (a non-div) the class "myClass" and style it differently, you should just go with .myClass.
For example, if all .error are color:red, but div.error are background:red as well, you may set up the file to include styles for both .error and div.error.
Austin Fitzpatrick
2010-06-02 23:19:32
will there be a performance different?
CrazyJugglerDrummer
2010-06-02 23:47:24
+1
A:
Using div.myClass would be slower performance wise as opposed to just going .myClass. Always target an element directly when possible, this applies to everything. Rather than obtaining the parent element and then using that to target child elements which will impact performance always use ID's and classes when possible.
CSS performance isn't really something most web developers take into consideration, which is a shame because badly written CSS can easily lock up a web browser and cause all kinds of issues for the end-user.
Dwayne
2010-06-02 23:26:37
`div.myClass` doesn't describe a parent-child relationship. `.myClass` could apply to any type of HTMLElement, while `div.myClass` will apply *only* to div Elements. This could be a performance *improvement*, not a penalty, because the browser only has to check divs to see if they have `class="myClass"` - Of course, this is entirely dependent on a browsers CSS implementation.
Stephen P
2010-06-02 23:42:54
Stephen, I thought CSS was processed from right to left? Meaning .myClass would be found, then it would search for all DIV's with that class.So wouldn't just using a class be a lot better in terms of performance?
Dwayne
2010-06-09 02:08:33
@Dwayne, finding all divs within a class would be declared as `.myClass div { ... }` or only divs that are direct children of a class would be `.myClass > div { ... }` The actual parsing of the CSS can be implementation dependent, I don't think the spec dictates anything. I see no reason to parse right-to-left though.
Stephen P
2010-06-10 00:42:09
+8
A:
div.myClass makes the style declaration more specific. In other words, it takes higher priority. So, it's sometimes a good thing to specify it in order to avoid CSS conflicts when you've got many developers onboard a project and people add classes like there's no tomorrow. In other words, if you've got Bob adding:
.myClass {
color: red;
}
and Sarah adds:
div.myClass {
color: blue;
}
Sarah's class will trump Bob's class when you've got:
<div class="myClass">Sarah FTW</div>
You can get make it even more specific by specifying it with the ID, but that's sort of outside the scope of your question. :)
Gert G
2010-06-02 23:28:07
+1
A:
I believe it's best to never broaden the scope beyond what your intentions are - use div.myClass if you're only going to apply this class to div's. This has at least 2 benefits:
- If you use .myClass, and then accidentally create a.myClass, you'll have your .myClass styles applied to all links of class myClass, causing you unnecessary debugging headaches.
- Your CSS will be much more readable. You, or someone else looking over it will be able to see that myClass is applied to divs, and won't have to painstakingly search through every HTML document to see what it's used for.
theFunkyEngineer
2010-06-02 23:30:24